»
EnglishFrenchVietnamese

Print - X Drag Demo - JavaScriptBank.com

Full version: jsB@nk » Form » Table » X Drag Demo
URL: https://www.javascriptbank.com/crossbrowser-x-drag-demo.html

X Drag Demo © JavaScriptBank.comDrag events implemented with the X Library.

Full version: jsB@nk » Form » Table » X Drag Demo
URL: https://www.javascriptbank.com/crossbrowser-x-drag-demo.html



CSS
<style type="text/css">#d2Container {  position:absolute; margin:0; padding:0; font-size:x-small;  width:200px; height:auto; color:#000; background:#ffc; overflow:hidden;}#d2Contents {  padding:10px;}.draggable {  position:absolute; margin:0; padding:0; font-size:x-small;  width:100px; color:#000; background:#963; overflow:hidden;}#d1 {  padding:10px;  cursor:default;}#d2 {  padding:0;  cursor:default;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script type="text/javascript">window.onload = function(){    if (window.winOnLoad) window.winOnLoad();}</script><script type="text/javascript">var hiZ = 2;window.onload = function(){  var ele = xGetElementById('d1');  xMoveTo(ele, (xClientWidth() - xWidth(ele)) / 2, (xClientHeight() - xHeight(ele)) / 2);  xEnableDrag(ele, myOnDragStart, myOnDrag, myOnDragEnd);  ele = xGetElementById('d2Container');  xMoveTo(ele, xClientWidth() - xWidth(ele) - 10, (xClientHeight() - xHeight(ele)) / 2);    ele = xGetElementById('d2');  xResizeTo(ele, 20, 20);  xMoveTo(ele, 180, 0);  xEnableDrag(ele, myOnDragStart, myOnDrag, myOnDragEnd);}function myOnDragStart(ele, mx, my){  window.status = '';  if (ele.id == 'd2') xZIndex('d2Container', hiZ++);  else xZIndex(ele, hiZ++);  ele.myTotalMX = 0;  ele.myTotalMY = 0;}function myOnDrag(ele, mdx, mdy){  if (ele.id == 'd2') {    xMoveTo('d2Container', xLeft('d2Container') + mdx, xTop('d2Container') + mdy);  }  else {    xMoveTo(ele, xLeft(ele) + mdx, xTop(ele) + mdy);  }    ele.myTotalMX += mdx;  ele.myTotalMY += mdy;}function myOnDragEnd(ele, mx, my){  window.status =    ele.id +    ':  Thanks for the drag!  Total X movement: ' + ele.myTotalMX +    ',  Total Y movement: ' + ele.myTotalMY;}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<script src="x_core.js"></script><script src="x_event.js"></script><script src="x_drag.js"></script><div id="d1" class="draggable" style="z-index: 3; top: 268px; left: 472px;">  <p><strong>I am &#39;d1&#39;</strong></p>  <p>You can drag me anywhere on this element or one of its child elements.</p></div><div id="d2Container" style="left: 789px; top: 216px;">  <div id="d2" class="draggable" style="width: 20px; height: 20px; left: 180px; top: 0px;">d2</div>  <div id="d2Contents">    <p><strong>I am &#39;d2Container&#39;</strong></p>    <p>You can only drag me by dragging on &#39;d2&#39;, which is the element in the upper right corner.</p>  </div>  </div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


Files
http://javascriptbank.com/javascript/form/crossbrowser/x_core.jshttp://javascriptbank.com/javascript/form/crossbrowser/x_event.jshttp://javascriptbank.com/javascript/form/crossbrowser/x_drag.js