ListBox with Drag and Drop

In this post, we will show you how to add a ListBox to a web page and enable its Drag and Drop feature. 1. Every jQWidgets based project must include the following three files: jQuery Framework(jquery-1.7.2.min.js), jQWidgets Core framework file(jqxcore.js) and the base jQWidgets stylesheet – jqx.base.css. In addition to these required files, this project includes several more JavaScript files that define the ListBox widget. jqxListBox’s Drag and Drop functionality is implemented in the jqxdragdrop.js file and so we need to include it, too.
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
2. Add a DIV tag for the ListBox.
<div id="listbox">
3. Create the ListBox by selecting the DIV tag with jQuery and calling the jqxListBox constructor. In order to enable the drag and drop feature, we need to set the jqxListBox’s ‘allowDrag’ and ‘allowDrop’ properties to true. The ‘allowDrag’ property allows us to drag a ListBox item. The ‘allowDrop’ property allows the user to drop an item in the jqxListBox.
<script type="text/javascript">
$(document).ready(function () {
var theme = '';
var data = [
"Café Bombón",
"Café au lait",
"Caffé Corretto",
"Café Crema",
"Caffé Latte",
"Caffé macchiato",
"Café mélange",
"Coffee milk",
"Cafe mocha"
// Create a jqxListBox
$("#listbox").jqxListBox({ allowDrop: true, allowDrag: true, source: data, width: 200, height: 250, theme: theme });

About admin

This entry was posted in jQuery, jQuery Plugins, jQuery UI, jqxListBox and tagged , , , , , , , , , , , , , , , , , . Bookmark the permalink.

2 Responses to ListBox with Drag and Drop

  1. Ray says:

    Hello! How can I use the drag and drop feature with an array of objects as the source, to re-read the order of the source and save it serverside? Even the generated ids of the content div’s seem to change after the drag and drop event … The labels of my elements are the same in some cases, leaving me nothing to read which element has been rearranged where?

    • admin says:

      You can get the ListBox items by using the ‘getItems’ method.
      var items = $(“#jqxListBox”).jqxListBox(‘getItems’);

      The ‘getItems’ method will return an array of the list items in the order they’re displayed. You should not use the DIV’s ID because the DIV’s are used only to display the information to the user and are recycled and reused when the user scrolls through the items i.e we don’t create a new DIV tag for each List item.

Leave a Reply