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>

HTML5实现网页元素的拖放操作

HTML5之前,要实现网页元素的拖放操作,需要依靠mousedown、mousemove、mouseup等API,通过大量的JS代码来实现;HTML5中引入了直接支持拖放操作的API,大大简化了网页元...
  • hbcui1984
  • hbcui1984
  • 2013年01月01日 22:19
  • 8689

HTML5 元素拖动 - 实现元素左右拖动

1、拖放(Drag 和 drop)是 HTML5 标准的组成部分。   拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放...
  • daimomo000
  • daimomo000
  • 2017年02月22日 13:41
  • 331

html drag 拖拽元素

http://blog.csdn.net/cyseria/article/details/38354291
  • u012536005
  • u012536005
  • 2016年09月22日 13:50
  • 420

基于jQuery(原生也可以)实现HTML元素拖动(自制窗口拖动,以及多个窗口拖动并且互不干扰)源代码

html> lang="en"> charset="UTF-8"> .drag { position: absolute; ...
  • zpcsgo
  • zpcsgo
  • 2016年12月16日 12:02
  • 815

简单几步原生javascript实现元素拖拽功能兼容所有浏览器

代码 *{margin: 0;padding: 0;} 按住左键拖动 window.onload = function() { //...
  • u012906135
  • u012906135
  • 2016年09月30日 14:54
  • 1400

html模块拖拽功能

实现html模块拖拽功能   如下图 body{ margin-top: 0px; } DIV.dragHeader { width: 100%; height: 20px...
  • kevin_Luan
  • kevin_Luan
  • 2015年06月06日 18:31
  • 1453

24行代码,让你的网页元素任意放大、缩小、拖拽、移动

原文地址:点击打开链接 前段时间写的,蛮长时间了。个人很喜欢,一段很简单的代码,却能够实现很多功能。到底多简单,先来看代码: 基于jQuery: 1 2...
  • qq798833488
  • qq798833488
  • 2016年05月13日 09:59
  • 3382

HTML table鼠标拖拽排序

HTML table鼠标拖拽排序
  • u010565261
  • u010565261
  • 2017年02月09日 13:18
  • 663

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

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

html5中介绍的是拖动一个元素到指定的元素框内

这里我把代码块分开,先介绍一下script,body部分 function allowDrop(ev) { //默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默...
  • whjay520
  • whjay520
  • 2016年08月31日 10:58
  • 774
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html可拖拽元素
举报原因:
原因补充:

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