jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
147 lines (137 loc) • 6.78 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
<meta name="description" content="The jqxListBox represents a widget that contains a list of selectable items." />
<title id='Description'>This demo demonstrates the jqxListBox Drag and Drop capabilities.
With the jqxListBox's Drag and Drop, you can reorder items, move items from one
ListBox to another or just drop an item anywhere and get its data.</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.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>
</head>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var data1 = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait",
"Caffé Corretto",
"Café Crema",
"Caffé Latte",
"Caffé macchiato",
"Café mélange",
"Coffee milk",
"Cafe mocha"
];
var data2 = [
"Cappuccino",
"Carajillo",
"Cortado",
"Cuban espresso",
"Espresso",
"Eiskaffee",
"The Flat White",
"Frappuccino",
"Galao",
"Greek frappé coffee",
"Iced Coffee",
"Indian filter coffee",
"Instant coffee",
"Irish coffee",
"Liqueur coffee"
];
// Create a jqxListBox
$("#listBoxA").jqxListBox({ allowDrop: true, allowDrag: true, source: data1, width: 200, height: 250,
dragStart: function (item) {
if (item.label == "Breve")
return false;
},
renderer: function (index, label, value) {
if (label == "Breve") {
return "<span style='color: red;'>" + label + "</span>";
}
return label;
}
});
$("#listBoxB").jqxListBox({ allowDrop: true, allowDrag: true, source: data2, width: 200, height: 250,
dragEnd: function (dragItem, dropItem) {
if (dragItem.label == "Frappuccino")
return false;
},
renderer: function (index, label, value) {
if (label == "Frappuccino") {
return "<span style='color: red;'>" + label + "</span>";
}
return label;
}
});
$("#listBoxA, #listBoxB").on('dragStart', function (event) {
$("#dragStartLog").text("Drag Start: " + event.args.label);
$("#dragEndLog").text("");
});
$("#listBoxA, #listBoxB").on('dragEnd', function (event) {
$("#dragEndLog").text("Drag End");
if (event.args.label) {
var ev = event.args.originalEvent;
var x = ev.pageX;
var y = ev.pageY;
if (event.args.originalEvent && event.args.originalEvent.originalEvent && event.args.originalEvent.originalEvent.touches) {
var touch = event.args.originalEvent.originalEvent.changedTouches[0];
x = touch.pageX;
y = touch.pageY;
}
var offset = $("#textarea").offset();
var width = $("#textarea").width();
var height = $("#textarea").height();
var right = parseInt(offset.left) + width;
var bottom = parseInt(offset.top) + height;
if (x >= parseInt(offset.left) && x <= right) {
if (y >= parseInt(offset.top) && y <= bottom) {
$("#textarea").val(event.args.label);
}
}
}
});
});
</script>
<div id='jqxWidget'>
<div style="float: left;" id="listBoxA">
</div>
<div style="margin-left: 20px; float: left;" id="listBoxB">
</div>
<div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
<textarea rows="5" id="textarea"></textarea>
</div>
<div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
<b>Events Log:</b>
<div id="dragStartLog">
</div>
<div id="dragEndLog">
</div>
<br />
<b>Note:</b>
<br />
Dragging of "Breve" is disabled.
<br />
Dropping of "Frappuccino" is disabled.
</div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>