Sort (Drag and Drop)

How to add a drag and drop sorting feature for the Tags.

Database

Let's add a sort field to the tags table to track the order of the tags.

tags.fmt

id,24,N

post_id,24,N

name,255,T

sort,24,N

View

edit_post.tpl

Add sort class to parent div, add child class to all child divs and add relevant tag id to all child tags.

<div class="sort">

    {foreach $tags as $tag}

        <div class="child" id="{$tag.id}">

            

                {$tag.name}



        </div>

    {/foreach}

</div>

style.css

.sort {

    width: 50%;

}



.sort .child {

    margin: 5px;

    background: #FFF;

    border: 1px #154271 solid;

    padding: 5px;

    cursor: pointer;

}

script.js

Add sortable function inside the append_function_dialog function. Make sure to change the class name and the function name.

append_function_dialog(function (dialog_id) { 



    $(dialog_id + '.sort').sortable({

        update: function () { 

            var log = $(this).sortable("toArray");

            var fd = new FormData();

            fd.append('class', 'posts'); //class name

            fd.append('function', 'sort'); //function name

            fd.append('log', log);

            appcon('app.php', fd);

        }

    }).disableSelection();



});

Controller

posts.php

function sort(Controller $ctl)

{

        $log = $ctl->POST('log');



        $logArr = explode(',', $log);

        $c = 0;

        foreach ($logArr as $id) {

            $d = $this->frm_tags->get($id);

            $d['sort'] = $c;

            $this->frm_tags->update($d);

            $c++;

        }

}

Change the post edit function to order the tags.
$tags = $this->frm_tags->filter(['post_id'], [$id], false, 'AND', 'sort', SORT_ASC);

function edit(Controller $ctl, $id = null){



        $post = $this->frm_posts->get($id);

        $ctl->assign("post", $post);



        $tags = $this->frm_tags->filter(['post_id'], [$id], false, 'AND', 'sort', SORT_ASC);

        $ctl->assign("tags", $tags);



        $ctl->show_multi_dialog("edit".$id, "edit.tpl", "Edit Posts",1000,true,true);

}