Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Khung có thể kéo thả
URL: https://www.javascriptbank.com/crossbrowser-x-drag-demo.html
Hiệu ứng tạo các khung có thể kéo thả">kéo thả được đồng thời hiển thị tọa độ của các khung khi kéo/thả.
Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Khung có thể kéo thả
URL: https://www.javascriptbank.com/crossbrowser-x-drag-demo.html
<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--><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--><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 'd1'</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 'd2Container'</strong></p> <p>You can only drag me by dragging on 'd2', 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-->
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