在网页上实现拖动

来源：互联网发布：java volite 多线程编辑：程序博客网时间：2024/04/30 22:31

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../jquery-1.4.2.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script><style type="text/css">.dd-demo{width:60px;height:60px;border:2px solid #d3d3d3;position:absolute;}.proxy{border:1px dotted #333;width:60px;height:60px;text-align:center;background:#fafafa;}#dd1{background:#E0ECFF;left:20px;top:20px;}#dd2{background:#8DB2E3;left:100px;top:20px;}#dd3{background:#FBEC88;left:180px;top:20px;}</style><script>$(function(){$('#dd1').draggable();$('#dd2').draggable({proxy:'clone'});$('#dd3').draggable({proxy:function(source){var p = $('<div class="proxy">proxy</div>');p.appendTo('body');return p;}});});</script></head><body><div id="dd1" class="dd-demo"></div><div id="dd2" class="dd-demo"></div><div id="dd3" class="dd-demo"></div></body></html>

演示网址：http://www.jeasyui.com/tutorial/dd/dnd1_demo.html