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>
