jqxDragDrop requires the following files:
jqx.base.css
jqxcore.js
jqxdragdrop.js
To bind to an event of a UI Component, you can use<script src="~/jqwidgets/jqxdragdrop.js"></script>
<style type="text/css">
.row {
padding: 1px;
}
.draggable {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;left: 30px;top: 50px;padding: 5px;z-index: 2;}#draggable-parent {background-color: #eeffee;width: 350px;height: 350px;text-align: center;border: 1px solid #eee;float: left;}.main-container {width: 350px;height:350px;z-index: 0;}.events {float: right;padding: 10px;font-family: Tahoma;font-size: 13px;}.labels {position: relative;font-family: Verdana;font-size: 11px;color: #000;}.drop-target {background-color: #FBFFB5;width: 150px;height: 150px;border: 1px solid #ddd;margin-left: 190px;margin-top: 70px;z-index: 1;}</style><div class="main-container"><div id="draggable-parent"><div id="draggable" class="draggable"><div class="labels">I can be dragged only inside my parent</div></div><jqx-drag-drop selector="draggable"></jqx-drag-drop><div class="drop-target"><div class="label">I'm a drop target</div></div></div></div>
on-event-type
syntax. The example
code below demonstrates how to bind to an event.
<script src="~/jqwidgets/jqxdragdrop.js"></script>
<style type="text/css">
.row {
padding: 1px;
}
.draggable {
border: 1px solid #bbb;
background-color: #C9ECFF;
width: 100px;
height: 100px;left: 30px;top: 50px;padding: 5px;z-index: 2;}#draggable-parent {background-color: #eeffee;width: 350px;height: 350px;text-align: center;border: 1px solid #eee;float: left;}.main-container {width: 350px;height:350px;z-index: 0;}.events {float: right;padding: 10px;font-family: Tahoma;font-size: 13px;}.labels {position: relative;font-family: Verdana;font-size: 11px;color: #000;}.drop-target {background-color: #FBFFB5;width: 150px;height: 150px;border: 1px solid #ddd;margin-left: 190px;margin-top: 70px;z-index: 1;}</style><div class="main-container"><div id="draggable-parent"><div id="draggable" class="draggable"><div class="labels">I can be dragged only inside my parent</div></div><jqx-drag-drop selector="draggable"></jqx-drag-drop><div class="drop-target"><div class="label">I'm a drop target</div></div></div></div>@section scripts {<script type="text/javascript">function eventHandler(event) {}</script>}