Quantcast
Channel: Telerik Forums RSS
Viewing all articles
Browse latest Browse all 94857

Drag&Drop between listview with sorting

$
0
0

Hi,

 

I've been able to make drag&drop between two listview, but the dropped elements always go at the end of stack.

I'd like to position the dropped elements exactly where they are dropped, among the others, and then keep them sortable inside the listview.

Something like this: http://www.jqueryrain.com/?cy_emSfj

 

Currently my code is the following, but I'm not able to manage the position drop and sorting:

 

<div id="listA"></div>
<div id="listB"></div>
 
<script type="text/x-kendo-tmpl"id="template">
    <div class="bitem">
        Name:#: item # (#: position #)
        <a class="k-button k-button-icontext k-delete-button"id="delete_user"  href="javascript:delusr(this)"><span class="k-icon k-delete"></span>X</a>
    </div>
</script>
 
 
<script>
    //create dataSource
    varlistA_DS = newkendo.data.DataSource({
        data: [
            { id: 1, item: "Label", position:0 },
            { id: 2, item: "Text", position: 0 },
            { id: 3, item: "Radio", position: 0 },
            { id: 4, item: "DropDown", position: 0 },
            { id: 5, item: "CheckBox", position: 0 }
        ],
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number"},
                    item: { type: "string"},
                    position: { type: "number"}
                }
            }
        }
    });
 
    //display dataSource's data through ListView
    $("#listA").kendoListView({
        dataSource: listA_DS,
        template: "<div class='item'>Name: #: item #</div>"
    });
 
 
    //create a draggable for the parent container
    $("#listA").kendoDraggable({
        filter: ".item", //specify which items will be draggable
        dragstart: function(e) {
            vardraggedElement = e.currentTarget, //get the DOM element that is being dragged
                dataItem = listA_DS.getByUid(draggedElement.data("uid")); //get corresponding dataItem from the DataSource instance
 
            console.log(dataItem);
        },
        hint: function(element) { //create a UI hint, the `element` argument is the dragged item
            returnelement.clone().css({
                "opacity": 0.6,
                "background-color": "#0cf"
            });
        }
    });
 
    varlistB_DS = newkendo.data.DataSource({
        data: [ /* still no data */],
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number"},
                    position: { type: "number"},
                    item: { type: "string"}
                }
            }
        }
    });
    $("#listB").kendoListView({
        dataSource: listB_DS,
        //template: "<div class='item'>ListB: #: item #</div>"
        template: kendo.template($("#template").html())
    });
 
    functionaddStyling(e) {
        this.element.css({
            "border-color": "#F00",
            "background-color": "#e0e0e0",
            "opacity": 0.6
        });
    }
 
    functionresetStyling(e) {
        this.element.css({
            "border-color": "black",
            "background-color": "transparent",
            "opacity": 1
        });
    }
 
    vardest;
    $("#listB").kendoDropTarget({
        dragenter: addStyling, //add visual indication
        dragleave: resetStyling, //remove the visual indication
        drop: function(e) { //apply changes to the data after an item is dropped
            vardraggableElement = e.draggable.currentTarget,
            dataItem = listA_DS.getByUid(draggableElement.data("uid")); //find the corresponding dataItem by uid
 
            dataItem.item = "ListB";
            dest = $(e.target);
            if(dest.get("id")) {
                //reorder the items
                vartmp = target.get("position");
                target.set("position", dest.get("position"));
                dest.set("position", tmp);
 
                listB_DS.sort({ field: "position", dir: "asc"});
            }
            else{
 
            }
 
            //listA_DS.remove(dataItem); //remove the item from ListA
            listB_DS.add(dataItem); //add the item to ListB
            $("#listB").height("+=60");
            resetStyling.call(this); //reset visual dropTarget indication that was added on dragenter
        }
    });
 
     
    functiondelusr(elem) {
        varitem = $(elem).closest("[role='option']");
        vardata = listB_DS.getByUid(item.data("uid"));
        alert(item);
    }
 
</script>
 
<style>
    #listA, #listB {
        width: 300px;
        height: 280px;
        float: left;
        margin-right: 30px;
        border: 3px solid black;
        border-radius: 3px;
    }
 
    .item, .bitem {
        margin: 5px;
        padding: 5px;
        text-align: center;
        border: 2px solid#ccc;
        border-radius: 5px;
        width:260px;
    }
</style>

Viewing all articles
Browse latest Browse all 94857

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>