appendTo
|
string
|
'parent'
|
Sets or gets the appendTo property.
<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>
|
disabled
|
bool
|
false
|
Sets or gets the disabled property.
<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>
|
distance
|
int
|
5
|
Sets or gets the distance property.
<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>
|
data
|
string
|
null
|
Sets or gets the data property.
<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>
|
dropAction
|
string
|
'default'
|
Sets or gets the dropAction property.
<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>
|
dropTarget
|
string/object
|
undefined
|
Sets or gets the dropTarget property.
<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>
|
dragZIndex
|
int
|
undefined
|
Sets or gets the dragZIndex property.
<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>
|
feedback
|
string
|
undefined
|
Sets or gets the feedback property.
<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>
|
initFeedback
|
string
|
undefined
|
Sets or gets the initFeedback property.
<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>
|
opacity
|
int
|
undefined
|
Sets or gets the opacity property.
<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>
|
onDragEnd
|
string
|
undefined
|
Sets or gets the onDragEnd property.
<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>
|
onDrag
|
string
|
undefined
|
Sets or gets the onDrag property.
<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>
|
onDragStart
|
string
|
undefined
|
Sets or gets the onDragStart property.
<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>
|
onTargetDrop
|
string
|
undefined
|
Sets or gets the onTargetDrop property.
<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>
|
onDropTargetEnter
|
string
|
undefined
|
Sets or gets the onDropTargetEnter property.
<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>
|
onDropTargetLeave
|
string
|
undefined
|
Sets or gets the onDropTargetLeave property.
<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>
|
restricter
|
object/string
|
undefined
|
Sets or gets the restricter property.
<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>
|
revert
|
bool
|
undefined
|
Sets or gets the revert property.
<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>
|
revertDuration
|
int
|
undefined
|
Sets or gets the revertDuration property.
<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>
|
tolerance
|
string
|
undefined
|
Sets or gets the tolerance property.
<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>
|
|
dragStart
|
Event
|
|
Code examples
Bind to the dragStart event of jqxDragDrop.
<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) {
|
dragEnd
|
Event
|
|
Code examples
Bind to the dragEnd event of jqxDragDrop.
<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) {
|
dragging
|
Event
|
|
Code examples
Bind to the dragging event of jqxDragDrop.
<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) {
|
dropTargetEnter
|
Event
|
|
Code examples
Bind to the dropTargetEnter event of jqxDragDrop.
<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) {
|
dropTargetLeave
|
Event
|
|
Code examples
Bind to the dropTargetLeave event of jqxDragDrop.
<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) {
|
|