|
appendTo
|
string
|
'parent'
|
Sets or gets the appendTo property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", appendTo:"body", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent",disabled:true, theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
distance
|
number
|
5
|
Sets or gets the distance property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent",distance:12, theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
data
|
object
|
null
|
Sets or gets the data property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", data:'{foo: 'foo', bar: 'bar'}', theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
dropAction
|
string
|
'default'
|
Sets or gets the dropAction property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", dropAction:"none", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
dropTarget
|
string/object
|
null
|
Sets or gets the dropTarget property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".dropTarget", restricter:"parent", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
dragZIndex
|
number
|
99999
|
Sets or gets the dragZIndex property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent",dragZIndex:6, theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
feedback
|
string
|
'clone'
|
Sets or gets the feedback property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", feedback:"original", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
initFeedback
|
function
|
null
|
Sets or gets the initFeedback property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", initFeedback:"initFeedback", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
opacity
|
number
|
0.6
|
Sets or gets the opacity property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent",opacity:0.3, theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
onDragEnd
|
function
|
null
|
Sets or gets the onDragEnd property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", onDragEnd:"onDragEnd", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
onDrag
|
function
|
null
|
Sets or gets the onDrag property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", onDrag:"onDrag", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
onDragStart
|
function
|
null
|
Sets or gets the onDragStart property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", onDragStart:"onDragStart", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
onTargetDrop
|
function
|
null
|
Sets or gets the onTargetDrop property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", onTargetDrop:"onTargetDrop", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
onDropTargetEnter
|
function
|
null
|
Sets or gets the onDropTargetEnter property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", onDropTargetEnter:"onDropTargetEnter", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
onDropTargetLeave
|
function
|
null
|
Sets or gets the onDropTargetLeave property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", onDropTargetLeave:"onDropTargetLeave", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
restricter
|
object/string
|
'document'
|
Sets or gets the restricter property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", theme:"light" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
revert
|
boolean
|
false
|
Sets or gets the revert property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", theme:"light",revert: true } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
revertDuration
|
number
|
400
|
Sets or gets the revertDuration property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", theme:"light",revertDuration:300,revert: true } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
tolerance
|
string
|
'intersect'
|
Sets or gets the tolerance property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", theme:"light", tolerance:"fit" } </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
|
|
dragStart
|
Event
|
|
Code examples
Bind to the dragStart event of jqxDragDrop.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", theme:"light" } window.onload = function() { document.querySelector( "jqx-drag-drop").addEventListener("dragStart", function(event) { // Your code here. }); }; </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
dragEnd
|
Event
|
|
Code examples
Bind to the dragEnd event of jqxDragDrop.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", theme:"light" } window.onload = function() { document.querySelector( "jqx-drag-drop").addEventListener("dragEnd", function(event) { // Your code here. }); }; </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
dragging
|
Event
|
|
Code examples
Bind to the dragging event of jqxDragDrop.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", theme:"light" } window.onload = function() { document.querySelector( "jqx-drag-drop").addEventListener("dragging", function(event) { // Your code here. }); }; </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
dropTargetEnter
|
Event
|
|
Code examples
Bind to the dropTargetEnter event of jqxDragDrop.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", theme:"light" } window.onload = function() { document.querySelector( "jqx-drag-drop").addEventListener("dropTargetEnter", function(event) { // Your code here. }); }; </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
dropTargetLeave
|
Event
|
|
Code examples
Bind to the dropTargetLeave event of jqxDragDrop.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>DragDrop Custom Element Settings</title> <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" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="../scripts/demos.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: 650px; z-index: 0; } .events { float: right; padding: 10px; font-family: Tahoma; font-size: 13px; } .label { 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> <script type="text/javascript"> JQXElements.settings[ "dragdropSettings"] = { dropTarget: ".drop-target", restricter:"parent", theme:"light" } window.onload = function() { document.querySelector( "jqx-drag-drop").addEventListener("dropTargetLeave", function(event) { // Your code here. }); }; </script></head><body> <div class="main-container"> <div id="draggable-parent"> <jqx-drag-drop settings="dragdropSettings" id="draggable" class="draggable"> <div class="label">I can be dragged only inside my parent </div> </jqx-drag-drop> <div class="drop-target"><div class="label">I'm a drop target </div></div> </div> <div id="events" class="events">
|
|
|
