Update list for jqxListBox in jQuery upon drag event - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: drag, drop, item, JavaScript, jQuery, jqxListBox, list, ListBox, selected

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Update list for jqxListBox in jQuery upon drag event Posts

November 20, 2013 at 8:52 am Update list for jqxListBox in jQuery upon drag event #32973

constituo

Member

I am trying to print out an updated list when a user has dragged and dropped an items in jqxListbox.

JS code:

<script type="text/javascript">
    $(document).ready(function () {
        var theme = getDemoTheme();
        var data1 = ['skin', 'intelligence', 'weight', 'volume'];
        
        // Create a jqxListBox
        $("#listBoxA").jqxListBox({ allowDrop: true, allowDrag: true, source: data1, width: 315, height: 150, theme: theme,
            
			dragEnd: function () {
			    
				// Get all items.
				var items = $("#jqxWidget").jqxListBox('getItems');
				
				// Get selected indexes.
				var selectedIndexes = $("#jqxWidget").jqxListBox('selectedIndexes');
				var selectedItems = [];
				
				// Get selected items.
				for (var index in selectedIndexes) 
				{
				    if (selectedIndexes[index] != -1) 
				    {
				        selectedItems[index] = items[index];
				    }
				}
				
				$("#map_canvas").text(selectedItems);
			    
			}
            
        });
    });
</script>

HTML code:

<div class="col-md-4 nopadding-left">
    <div class="widget">
        <div class="widget-header">
            <h3>Dimensions</h3>
        </div>
        <div class="widget-content">
            <div id='jqxWidget'>
                <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
            </div>
        </div>
    </div>
</div>
<div class="col-md-8 nopadding-right">
    <div class="widget">
        <div class="widget-header">
            <h3>Results</h3>
        </div>
        <div class="widget-content">
            <div id="map_canvas" style="height: 322px;"></div>
        </div>
    </div>
</div>

Any advice?

November 21, 2013 at 8:49 am Update list for jqxListBox in jQuery upon drag event #33017

Dimitar

Participant

Hello constituo,

Here is a suggestion on how your code can be improved:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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>
</head>
<script type="text/javascript">
    $(document).ready(function () {
        var theme = getDemoTheme();
        var data1 = ['skin', 'intelligence', 'weight', 'volume'];
        // Create a jqxListBox
        $("#listBoxA").jqxListBox({ allowDrop: true, allowDrag: true, source: data1, width: 315, height: 150, theme: theme,
            dragEnd: function () {
                // Get selected items.
                var selectedItems = $("#listBoxA").jqxListBox('getSelectedItems');
                $("#map_canvas").text(selectedItems[0].label);
            }
        });
    });
</script>
<body>
    <div class="col-md-4 nopadding-left">
        <div class="widget">
            <div class="widget-header">
                <h3>
                    Dimensions</h3>
            </div>
            <div class="widget-content">
                <div id='jqxWidget'>
                    <div style="clear: both; margin-bottom: 20px;" id="listBoxA">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8 nopadding-right">
        <div class="widget">
            <div class="widget-header">
                <h3>
                    Results</h3>
            </div>
            <div class="widget-content">
                <div id="map_canvas" style="height: 322px;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.