求JS或者JQUERY实现拖动DIV交换位置的代码，加急！~
代码结构如下所示：<divid="demo"><divclass=“box"><divclass="box1"></div></div><divclass="box"><...
代码结构如下所示：
<div id="demo">
<div class=“box">
<div class="box1"></div>
</div>
<div class="box">
<div class="box2"></div>
</div>
<div class="box">
<div class="box3"></div>
</div>
< div>
要求拖拽box1或者box2 ，也就是说是box里面的div元素可以拖拽并且可以交换位置，也就是说。box1拖拽到box2上，就和box2交换位置，而box 则是存放box+n 的容器 ，位置不变的。
求最简单代码实现！~网上虽然有相关示例，但都太复杂了，我没法改啊，最好要求最简单代码实现，我可以看一下实现方式也可以做一些修改。 qq584-366-725 展开
<div id="demo">
<div class=“box">
<div class="box1"></div>
</div>
<div class="box">
<div class="box2"></div>
</div>
<div class="box">
<div class="box3"></div>
</div>
< div>
要求拖拽box1或者box2 ，也就是说是box里面的div元素可以拖拽并且可以交换位置，也就是说。box1拖拽到box2上，就和box2交换位置，而box 则是存放box+n 的容器 ，位置不变的。
求最简单代码实现！~网上虽然有相关示例，但都太复杂了，我没法改啊，最好要求最简单代码实现，我可以看一下实现方式也可以做一些修改。 qq584-366-725 展开
5个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*.column {float: left;}*/
.column div{width: 178px;height: 56px;margin-bottom: 2px;}
.box1{background-color: black;}
.box2{background-color: bisque;}
.box3{background-color: gray;}
.box4{background-color: wheat;}
</style>
</head>
<body>
<div class="column" draggable="true">
<div class="box1">
</div>
</div>
<div class="column" draggable="true">
<div class="box2">
</div>
</div>
<div class="column" draggable="true">
<div class="box3">
</div>
</div>
<div class="column" draggable="true">
<div class="box4">
</div>
</div>
<script>
function handleDragStart(e) {
this.style.opacity = '1';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
//拖拽完成后，作用在拖拽元素上
function handleDrop(e) {
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
//拖拽完成后，作用在被拖拽元素上
function handleDragEnd(e) {
this.style.opacity = '1';
[].forEach.call(divs, function(d) {
d.classList.remove('over');
});
}
var divs = document.querySelectorAll('.column');
[].forEach.call(divs, function(d) {
d.addEventListener('dragstart', handleDragStart, false);
d.addEventListener('dragenter', handleDragEnter, false);
d.addEventListener('dragover', handleDragOver, false);
d.addEventListener('dragleave', handleDragLeave, false);
d.addEventListener('drop', handleDrop, false);
d.addEventListener('dragend', handleDragEnd, false);
});
</script>
</body>
</html>
可以实现你要的效果 不过看到晚了，可以拖动交换位置和数据
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*.column {float: left;}*/
.column div{width: 178px;height: 56px;margin-bottom: 2px;}
.box1{background-color: black;}
.box2{background-color: bisque;}
.box3{background-color: gray;}
.box4{background-color: wheat;}
</style>
</head>
<body>
<div class="column" draggable="true">
<div class="box1">
</div>
</div>
<div class="column" draggable="true">
<div class="box2">
</div>
</div>
<div class="column" draggable="true">
<div class="box3">
</div>
</div>
<div class="column" draggable="true">
<div class="box4">
</div>
</div>
<script>
function handleDragStart(e) {
this.style.opacity = '1';
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
//拖拽完成后，作用在拖拽元素上
function handleDrop(e) {
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
}
return false;
}
//拖拽完成后，作用在被拖拽元素上
function handleDragEnd(e) {
this.style.opacity = '1';
[].forEach.call(divs, function(d) {
d.classList.remove('over');
});
}
var divs = document.querySelectorAll('.column');
[].forEach.call(divs, function(d) {
d.addEventListener('dragstart', handleDragStart, false);
d.addEventListener('dragenter', handleDragEnter, false);
d.addEventListener('dragover', handleDragOver, false);
d.addEventListener('dragleave', handleDragLeave, false);
d.addEventListener('drop', handleDrop, false);
d.addEventListener('dragend', handleDragEnd, false);
});
</script>
</body>
</html>
可以实现你要的效果 不过看到晚了，可以拖动交换位置和数据
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<script type="text/javascript">
$(function ()
{
$('#rr1,#rr2,#rr3').ligerDrag();
$('#rr1,#rr2,#rr3').ligerResizable();
});
</script>
</head>
<body style="padding:100px">
<div id="rr1" style="width:200px;height:300px;top:130px; left:200px; background:#A6DBD8; z-index:1; position:absolute;"> </div>
<div id="rr2" style="width:200px;height:300px;top:30px; left:340px; background:#AFCCF1; z-index:2;position:absolute;">
</div>
<div id="rr3" style="width:200px;height:200px;top:150px; background:#DA9188; z-index:3;position:absolute;"> </div>
<div style="display:none">
</div>
这是用jquery 写得。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
//jqueryui.com/draggable/#sortable
这样的吗
这样的吗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
亲，这个可以用默认的jquery ui组件啊，代码并不复杂。地址在http://jqueryui.com/sortable/
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
