html可拖拽元素

原创 2015年07月10日 10:41:26
<div  onmousemove="show_coords(event)">
<ul class="mtree">
<li id="1" pid="0">111</li>
<ul>
<li id="4" pid="1">111</li>
<li id="5" pid="1">222</li>
<li id="6" pid="1">333</li>
</ul>
<li id="2" pid="1">222</li>
<li id="3" pid="2">333</li>
</ul>
<ul id="ulone" onclick="adddom(this)" style="border:1px dashed #000;width:300px;height:400px;">


</ul>
</div>
<div id="maxdiv">
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script>
var x=0;
var y=0;
var cntree;
var moveli=$("#maxdiv").last("li");
$(".mtree").find("li").bind("click",function(){
$("#maxdiv").find("li").remove();
$(this).css("color","red");
cntree=$(this).clone();
$("#maxdiv").append($(cntree));
$(moveli).css("color","");
$(moveli).css("position","absolute");
$(moveli).css("top",(x+20)+"px");
$(moveli).css("left",y+"px");
});
//移动元素
function show_coords(event)
{
x=event.clientX
y=event.clientY
if(undefined!=$("#maxdiv").find("last:li")){
$(moveli).css("top",y+"px");
$(moveli).css("left",(x+20)+"px");
}
}
//添加元素
function adddom(obj){
$(obj).append($("#maxdiv").find("li"))


}
</script>

相关文章推荐

HTML拖拽改变元素长度

  • 2012年07月14日 17:06
  • 1KB
  • 下载

HTML5元素拖拽drag与拖放drop相关API

其实HTML5就是新增一些有用的API 让我们更轻松的开发 从而把更多精力都放在业务逻辑上来 这些API的使用也非常简单 不过我的记性不太好 所以还是以博客的形式记录下来(手动滑稽) 今天...

HTML5 元素拖拽 移动删除效果

通过拖放实现添加、删除 div>div{ display: inline-block; padding: 10px; background-color: #aaa; ...

Javascript实现网页元素拖拽排序

  • 2014年03月05日 16:28
  • 44KB
  • 下载

js多个元素拖拽

多个元素拖拽 多个元素拖拽 * { margin: 0; ...
  • M781101
  • M781101
  • 2016年12月16日 15:49
  • 137

drag表格内元素拖拽

  • 2015年12月15日 14:33
  • 49KB
  • 下载

SWT 应用程序 实现的Drag and Drop(DND) 和 GEF 树上元素的拖拽

Drag and drop 提供了一种在应用程序-应用程序中重新利用或者是转换数据的方法。本文讲述了如何在一个SWT应用程序中使用Drag 和 Drop机制和如何使用剪贴版转换数据。Drag and ...

js 元素拖拽效果

  • 2012年11月07日 17:48
  • 4KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html可拖拽元素
举报原因:
原因补充:

(最多只允许输入30个字)