jqueryeasyUI(3 元素拖動)
阿新 • • 發佈:2018-11-03
建立3個DIV,
<div id="div0" class="demo">
div0
</div>
<div id="div1" class="demo">
div1
</div>
<div id="div2" class="demo">
div2
</div>
配置不同的拖拽引數
<title> 元素拖拽</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script> </head> <style> .demo{ height: 60px; width: 60px; position: absolute; border:2px solid #d3d3d3; } #div0{ left:20px; top:20px; background-color: red } .proxy{ border:1px dotted #333; width:60px; height:60px; text-align:center; background:blue; } #div1{ left:100px; top:20px; background-color: green } #div2{ left:180px; top:20px; background-color: yellow } </style> <script> $(function(){ //允許拖拽 $('#div0').draggable(); //建立一個克隆來進行拖拽 $('#div2').draggable({ proxy:'clone' }); //通過建立自定義代理(proxy)讓其可以拖動。 $('#div1').draggable({ proxy:function(source){ var p = $('<div class="proxy">proxy</div>'); p.appendTo('body'); return p; } }); }); </script>