JavaScript：js实现拖拽移动，删除后自动排列
Posted 秋9
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript：js实现拖拽移动，删除后自动排列相关的知识，希望对你有一定的参考价值。
js实现拖拽移动，删除后自动排列，是基于《JavaScript：js实现拖拽》的改进。
具体如下：
html代码：
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>js实现拖拽移动和删除</title>
<script src="jquery-1.7.min.js"></script>
<script src="Waterfall.js"></script>
<link rel="stylesheet" type="text/css" href="Waterfall.css">
</head>
<body>
<input id="dictType" name="dictType" type="hidden" value="$dictType"/>
<input id="dictName" name="dictName" type="hidden" value="$dictName"/>
<div id="falls">
<div id="id1">
<span>景观灯<img src='close.png' onclick="dicDel('id1');"/></span>
<input name="dictDes" type="hidden" value="景观灯"/>
</div>
<div id="id2">
<span>灯柱<img src='close.png' onclick="dicDel('id2');"/></span>
<input name="dictDes" type="hidden" value="灯柱"/>
</div>
<div id="id3">
<span>壁灯<img src='close.png' onclick="dicDel('id3');"/></span>
<input name="dictDes" type="hidden" value="壁灯"/>
</div>
<div id="id4">
<span>灯笼<img src='close.png' onclick="dicDel('id4');"/></span>
<input name="dictDes" type="hidden" value="灯笼"/>
</div>
<div id="id5">
<span>吊灯<img src='close.png' onclick="dicDel('id5');"/></span>
<input name="dictDes" type="hidden" value="吊灯"/>
</div>
</div>
<script>
$(function()
$("#falls").append("");
$("#falls").Waterfall( row: 0, width: 150, speed: 200, margin: 15, delTime: 1500, control: "#falls span" );
);
function dicDel(divId)
document.getElementById(divId).remove();
var _list = [];
$("input[name='dictDes']").each(function(i,item)
_list.push(item.value);
console.log(i+"数组："+item.id+':'+item.value);
);
$("#falls").html("");
for(var i=0;i<_list.length;i++)
var timestamp = "id"+(new Date()).valueOf();
var inputDictDesValue=_list[i];
var str='<div id="'+timestamp+'"> ';
str+='<span>'+inputDictDesValue+'</span><img src="close.png" onclick="dicDel(\\''+timestamp+'\\');"/>';
str+='<input name="dictDes" type="hidden" value="'+inputDictDesValue+'"/>';
str+=' </div>';
$("#falls").append(str);
$("#falls").append("");
$("#falls").Waterfall( row: 0, width: 150, speed: 200, margin: 15, delTime: 1500, control: "#falls span" );
</script>
</body>
</html>
css
body
background-color:#EEE;
#falls
margin:0px auto 0px auto;
#falls div
float:left;
width:130px;
border-left:1px solid #DDD;
border-right:1px solid #DDD;
border-bottom:2px solid #CCC;
border-top:1px solid #EEE;
padding:10px;
background-color:#FFF;
#falls span
cursor:move;
padding:5px;
#falls span:hover
background-color:#DDD;
.clone
opacity: 0.8;
-filter:alpha(opacity=80); /* IE 透明度20% */
-moz-opacity:0.8; /* Moz FF 透明度20%*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*IE8*/
#falls img
/*width:200px;*/
margin:0px;
js
(function($)
$.fn.Waterfall = function(setting)
return this.each(function()
var vs = $.browser;
var defaults =
row: 0,
width: 200,
margin: 5,
speed: 200,
tagName: 'div',
mark: 'fall',
delTime: 3000,
control: "#falls:first-child"
;
var topList = [],
leftList = [],
settings = $.extend(defaults, setting),
$Obj = $(this),
Olist,
Ol,
Olength = 0,
rows,
Fwidth = settings.width + settings.margin,
Swidth,
Mwidth,
msie;
var clone, down = false,
sour, targ, cur =
curX: 0,
curY: 0
,
sou =
souX: 0,
souY: 0
,
tag =
tagX: 0,
tagY: 0
,
i = 0;
var min, minIndex;
var init = function()
rows = (settings.row == 0) ? Math.floor(($(window).width() - 40) / Fwidth) : settings.row;
Swidth = Fwidth * rows;
Lwidth = Fwidth * (rows + 1);
$Obj.css("width", Swidth)
;
var append = function()
init();
Olist = $Obj.children(settings.tagName + "[name!='" + settings.mark + "']");
Olist.css(
"position": "absolute"
);
if ($Obj.children(settings.tagName + "[name='" + settings.mark + "']").length > 0)
topList = $Obj.data("List").tL;
leftList = $Obj.data("List").lL
else
topList.length = 0;
leftList.length = 0;
$Obj.removeData("List");
for (var i = 0; i < rows; i++)
leftList.push(Fwidth * i);
topList.push(0)
;
var direction = function(elem)
min = Math.min.apply(,
topList);
minIndex = $.inArray(min, topList);
topList[minIndex] += elem.outerHeight() + settings.margin;
$Obj.css("height", Math.max.apply(,
topList))
;
var orient = function()
$("#falls div").each(function()
$(this).attr("name", settings.mark);
)
var timeout = setTimeout(function()
Olist.each(function()
var Ol = $(this);
if (Ol.attr("name") == settings.mark)
direction(Ol);
Ol.css(
top: min,
left: leftList[minIndex]
).fadeIn(settings.speed)
else
Ol.remove()
)
,
settings.delTime);
$Obj.data("List",
tL: topList,
lL: leftList
)
;
var reset = function()
init();
Olist = $Obj.children(settings.tagName + "[name='" + settings.mark + "']");
topList.length = 0;
leftList.length = 0;
for (var i = 0; i < rows; i++)
leftList.push(Fwidth * i);
topList.push(0)
Olist.each(function()
direction($(this));
$(this).stop().animate(
top: min,
left: leftList[minIndex]
,
settings.speed)
);
$Obj.data("List",
tL: topList,
lL: leftList
)
;
$(document).ready(function()
append();
orient();
$(window).unbind("resize").resize(function()
var _w = $(window).width();
if (_w < Swidth || _w > Lwidth)
reset()
);
if (true)
$(document).unbind("mousemove mouseup").mousemove(function(event)
if (down)
var eve = event || window.event;
clone.show();
var xx = (eve.pageX || eve.clientX) - cur.curX;
var yy = (eve.pageY || (eve.clientY + document.documentElement.scrollTop)) - cur.curY;
clone.css(
"top": yy,
"left": xx
);
var scroll = $(document).scrollTop();
if (eve.clientY > ($(window).height() - 100) && (document.documentElement.scrollTop + $(window).height()) < $(document).height())
document.body.scrollTop += 5
else if (eve.clientY < 100)
document.body.scrollTop -= 5
;
return false
).mouseup(function()
down = false;
try
clone.hide(200)
catch(e) finally
setTimeout(function()
$(".clone").remove()
,
200)
;
return false
);
var listChange = function(_sub)
var _sleft = sou.souX / Fwidth;
var _tleft = tag.tagX / Fwidth;
topList[_tleft] -= _sub;
topList[_sleft] += _sub;
$Obj.css("height", Math.max.apply(,
topList))
;
$Obj.unbind("mousedown mouseup").mousedown(function(e)
var event = e || window.event;
var elem = $(event.target || event.srcElement);
sour = elem.parents(settings.tagName + "[name='" + settings.mark + "']");
if (elem.is(settings.control))
sou.souX = parseInt(sour.css("left"));
sou.souY = parseInt(sour.css("top"));
cur.curX = (event.pageX || event.clientX) - sou.souX - settings.margin * 2;
cur.curY = (event.pageY || (event.clientY + document.body.scrollTop)) - sou.souY - settings.margin * 2 - 10;
down = true;
try
$(".clone").remove();
clone = sour.clone(false, true);
clone.attr("name", "clone");
clone.addClass("clone");
$Obj.append(clone)
catch(e)
$(".clone").remove()
;
return false
).mouseup(function(event)
if (down)
var eve = event || window.event;
var elem = $(eve.target || eve.srcElement);
targ = elem.parents(settings.tagName + "[name='" + settings.mark + "']") || elem;
if (targ.is(settings.tagName + "[name='" + settings.mark + "']"))
var current = $Obj.children(":first");
var top, t1 = 0;
var sub = targ.height() - sour.height();
tag.tagX = parseInt(targ.css("left"));
tag.tagY = parseInt(targ.css("top"));
if (tag.tagY != sou.souY || tag.tagX != sou.souX)
while (current.length != 0)
t1 = 0;
top = parseInt(current.css("top"));
if (current.css("left") == sou.souX + "px")
if (top > sou.souY)
t1 += sub
if (current.css("left") == tag.tagX + "px")
if (top > tag.tagY)
t1 += -sub
top += t1;
current.css(
"top": top
);
current = current.next()
souX = sour.css("left");
souY = sour.css("top");
tagX = targ.css("left");
tagY = targ.css("top");
listChange(sub);
targ.css(
"top": souY,
"left": souX
);
sour.css(
"top": tagY,
"left": tagX
);
clone.stop().animate(
"top": parseInt(tagY) + 2,
"left": parseInt(tagX) + 2
,
200)
else
clone.hide(200)
$("#time").val(targ.text());
down = false;
try
setTimeout(function()
clone.remove()
,
200)
catch(e)
$(".clone").remove()
return false
)
)
)
)(jQuery);运行效果为：
以上是关于JavaScript：js实现拖拽移动，删除后自动排列的主要内容，如果未能解决你的问题，请参考以下文章