draggable Boolean|Object (default: false)
Indicates whether the ListBox items can be dragged and dropped.
- The draggable option allows you to drag and drop items within a single or across multiple ListBoxes. If your project requires the multiple-widget scenario, set the
dropSourcesoption on the target widgets. If your project requires the single-widget scenario, thedropSourcesoption is not necessary.- If you set the
draggableoption totrue, you also have to setselectable.
draggable.enabled Boolean (default: true)
Indicates whether dragging is enabled.
Example - ListBox with disabled dragging
<select id="listBoxA">
<option>ItemA1</option>
<option>ItemA2</option>
</select>
<select id="listBoxB">
<option>ItemB1</option>
<option>ItemB2</option>
</select>
<script>
$("#listBoxA").kendoListBox({
draggable: true
});
$("#listBoxB").kendoListBox({
dropSources: [ "listBoxA" ],
draggable: {
enabled: false,
placeholder: function(element) {
return element.clone().css({
"opacity": 0.3,
"border": "1px dashed #000000"
});
}
}
});
</script>
draggable.hint Function|String|jQuery
Provides an option to customize the draggable item hint. If a function is supplied, it receives a single argument - the jQuery object of the draggable element. If a hint is not provided, the ListBox clones the dragged item and uses it as a hint.
To avoid styling issues, note that the
hintelement is appended to the<body>tag.
Example - ListBox with custom hint
<select id="listBox"></select>
<script>
$("#listBox").kendoListBox({
draggable: {
hint: function(element) {
return $("<span></span>")
.text(element.text())
.css("color", "#FF0000");
}
},
dataSource: [
{ name: "Item 1", id: 1 },
{ name: "Item 2", id: 2 }
],
dataTextField: "name",
dataValueField: "id"
});
</script>
draggable.placeholder Function|String|jQuery
Provides an option to customize the item placeholder of the ListBox. If a function is supplied, it receives a single argument - the jQuery object of the draggable element. If a placeholder is not provided, the ListBox clones the dragged item, removes its id attribute, sets its visibility to hidden, and uses it as a placeholder.
The
placeholderelement is appended to the container of the ListBox.
Example - ListBox with custom placeholder
<select id="listBox"></select>
<script>
$("#listBox").kendoListBox({
draggable: {
placeholder: function(element) {
return element.clone().css({
"opacity": 0.3,
"border": "1px dashed #000000"
});
}
},
dataSource: [
{ name: "Item 1", id: 1 },
{ name: "Item 2", id: 2 }
],
dataTextField: "name",
dataValueField: "id"
});
</script>