html可拖拽元素

<div  οnmοusemοve="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" οnclick="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>