关闭

html可拖拽元素

180人阅读 评论(0) 收藏 举报
<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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9749次
    • 积分:323
    • 等级:
    • 排名:千里之外
    • 原创:24篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条