jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
144 lines (135 loc) • 5.98 kB
HTML
<html ng-app="demoApp">
<head>
<meta name="keywords" content="AngularJS DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
<title id='Description'>This demo demonstrates the Angular ListBox 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>
<meta name="description" content="AngularJS ListBox example. This example demonstrates a Drag and Drop with ListBox built with Angular." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/angular.min.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.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">
var demoApp = angular.module("demoApp", ["jqwidgets"]);
demoApp.controller("demoController", function ($scope) {
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"
];
$scope.dragEndLog = $scope.dragStartLog = "";
// Create a jqxListBox
$scope.listBoxASettings = {
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;
}
};
$scope.listBoxBSettings = {
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;
}
};
$scope.dragStart = function (event) {
$scope.dragStartLog = "Drag Start: " + event.args.label;
$scope.dragEndLog = "";
};
$scope.dragEnd = function (event) {
$scope.dragEndLog = "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) {
$scope.textAreaValue = event.args.label;
}
}
}
};
});
</script>
<body ng-controller="demoController">
<jqx-list-box jqx-settings="listBoxASettings" jqx-on-drag-start="dragStart(event)" jqx-on-drag-end="dragEnd(event)" style="float: left;">
</jqx-list-box>
<jqx-list-box jqx-settings="listBoxBSettings" jqx-on-drag-start="dragStart(event)" jqx-on-drag-end="dragEnd(event)" style="margin-left: 20px; float: left;">
</jqx-list-box>
<div style="width: 200px; height: 200px; float: left; margin-left: 20px;">
<textarea ng-model="textAreaValue" rows="5" id="textarea"></textarea>
</div>
<div style="font-size: 13px; font-family: Verdana; padding-top: 20px; clear: both;">
<b>Events Log:</b>
<div>
{{dragStartLog}}
</div>
<div>
{{dragEndLog}}
</div>
<br />
<b>Note:</b>
<br />
Dragging of "Breve" is disabled.
<br />
Dropping of "Frappuccino" is disabled.
</div>
</body>
</html>