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
var
listA_DS =
new
kendo.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) {
var
draggedElement = 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
return
element.clone().css({
"opacity"
: 0.6,
"background-color"
:
"#0cf"
});
}
});
var
listB_DS =
new
kendo.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())
});
function
addStyling(e) {
this
.element.css({
"border-color"
:
"#F00"
,
"background-color"
:
"#e0e0e0"
,
"opacity"
: 0.6
});
}
function
resetStyling(e) {
this
.element.css({
"border-color"
:
"black"
,
"background-color"
:
"transparent"
,
"opacity"
: 1
});
}
var
dest;
$(
"#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
var
draggableElement = 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
var
tmp = 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
}
});
function
delusr(elem) {
var
item = $(elem).closest(
"[role='option']"
);
var
data = 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>