javascript DIV上下拖放功能

javascript DIV上下拖放功能,第1张

首先要包含jquery
[jQuery] 两个ul之间li元素的拖拉和排序 HTML代码:
<span class="left">
<b>one</b>
<ul id="list1" style="background-color:#ffee00" name="offJob">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</span>
<span class="left">
<b>two</b>
<ul id="list2" style="background-color:#ffee00" name="onJob">
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
</span>
jQuery代码:
$(function()
{
$("#list1, #list2")dragsort({
dragBetween: true
});
}
);
需要包含的js文件内容:
(function($) {
$fndragsort = function(options) {
var opts = $extend({}, $fndragsortdefaults, options);
var lists = new Array();
var list = null, lastPos = null;
thiseach(function(i, cont) {
var newList = {
draggedItem: null,
placeHolderItem: null,
pos: null,
offset: null,
offsetLimit: null,
container: cont,
init: function() {
$(thiscontainer)attr("listIdx", i)find(optsdragSelector)css("cursor", "pointer")mousedown(thisgrabItem);
},
grabItem: function(e) {
if (ebutton == 2)
return;

if (list != null && listdraggedItem != null)
listdropItem();
$(this)css("cursor", "move");
list = lists[$(this)parents("[listIdx]")attr("listIdx")];
listdraggedItem = $(this)is(optsitemSelector) $(this) : $(this)parents(optsitemSelector);
listoffset = listdraggedItemoffset();
listoffsettop = epageY - listoffsettop;
listoffsetleft = epageX - listoffsetleft;
var containerHeight = $(listcontainer)outerHeight() == 0 Mathmax(1, Mathround(05 +$(listcontainer)find(optsitemSelector)size() listdraggedItemouterWidth() / $(listcontainer)outerWidth())) listdraggedItemouterHeight() : $(listcontainer)outerHeight();
listoffsetLimit = $(listcontainer)offset();
listoffsetLimitright = listoffsetLimitleft + $(listcontainer)outerWidth() - listdraggedItemouterWidth();
listoffsetLimitbottom = listoffsetLimittop + containerHeight - listdraggedItemouterHeight();
listplaceHolderItem =listdraggedItemclone()html(" ")css({ visibility: "hidden",height: listdraggedItemheight() })attr("placeHolder", true);
listdraggedItemafter(listplaceHolderItem);
listdraggedItemcss({ position: "absolute", opacity: 08 });
$(lists)each(function(i, l) { lensureNotEmpty(); lbuildPositionTable(); });
listsetPos(epageX, epageY);
$(document)bind("selectstart", liststopBubble); //stop ie text selection
$(document)bind("mousemove", listswapItems);
$(document)bind("mouseup", listdropItem);
return false; //stop moz text selection
},
setPos: function(x, y) {
var top = y - thisoffsettop;
var left = x - thisoffsetleft;
if (!optsdragBetween) {
top = Mathmin(thisoffsetLimitbottom, Mathmax(top, thisoffsetLimittop));
left = Mathmin(thisoffsetLimitright, Mathmax(left, thisoffsetLimitleft));
}
thisdraggedItemcss({ top: top, left: left });
},
buildPositionTable: function() {
var item = thisdraggedItem == null null : thisdraggedItemget(0);
var pos = new Array();
$(thiscontainer)find(optsitemSelector)each(function(i, elm) {
if (elm != item) {
var loc = $(elm)offset();
locright = locleft + $(elm)width();
locbottom = loctop + $(elm)height();
locelm = elm;
pospush(loc);
}
});
thispos = pos;
},
dropItem: function() {
if (listdraggedItem == null)
return;
$(listcontainer)find(optsdragSelector)css("cursor", "pointer");
listplaceHolderItembefore(listdraggedItem);
listdraggedItemcss({ position: "", top: "", left: "", opacity: "" });
listplaceHolderItemremove();

$("[emptyPlaceHolder]")remove();
optsdragEndapply(listdraggedItem);
listdraggedItem = null;
$(document)unbind("selectstart", liststopBubble);
$(document)unbind("mousemove", listswapItems);
$(document)unbind("mouseup", listdropItem);
return false;
},
stopBubble: function() { return false; },
swapItems: function(e) {
if (listdraggedItem == null)
return false;
listsetPos(epageX, epageY);
var ei = listfindPos(epageX, epageY);
var nlist = list;
for (var i = 0; ei == -1 && optsdragBetween && i < listslength; i++) {
ei = lists[i]findPos(epageX, epageY);
nlist = lists[i];
}
if (ei == -1 || $(nlistpos[ei]elm)attr("placeHolder"))
return false;
if (lastPos == null || lastPostop > listdraggedItemoffset()top || lastPosleft > listdraggedItemoffset()left)
$(nlistpos[ei]elm)before(listplaceHolderItem);
else
$(nlistpos[ei]elm)after(listplaceHolderItem);
$(lists)each(function(i, l) { lensureNotEmpty(); lbuildPositionTable(); });
lastPos = listdraggedItemoffset();
return false;
},
findPos: function(x, y) {
for (var i = 0; i < thisposlength; i++) {
if (thispos[i]left < x && thispos[i]right > x&& thispos[i]top < y && thispos[i]bottom > y)
return i;
}
return -1;
},

ensureNotEmpty: function() {
if (!optsdragBetween)
return;
var item = thisdraggedItem == null null : thisdraggedItemget(0);
var emptyPH = null, empty = true;

$(thiscontainer)find(optsitemSelector)each(function(i, elm) {
if ($(elm)attr("emptyPlaceHolder"))
emptyPH = elm;
else if (elm != item)
empty = false;
});

if (empty && emptyPH == null)
$(thiscontainer)append(listplaceHolderItemclone()removeAttr("placeHolder")attr("emptyPlaceHolder", true));
else if (!empty && emptyPH != null)
$(emptyPH)remove();
}
};
newListinit();
listspush(newList);
});
return this;
};
$fndragsortdefaults = {
itemSelector: "li",
dragSelector: "li",
dragEnd: function() { },
dragBetween: false
};
})(jQuery);

这不需要用jquery,用css就可以满足。给你做了个例子。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=10">

<title>Document</title>

<style>

html,body,box{

margin:0;

padding:0;

height:100%;

overflow:hidden;

font-size:14px;

color:#333333;

}

box{

display:flex;

flex-direction: column;

box-sizing: border-box;

}

top{

height:60px;

background:#999999;

color:#ffffff;

}

left,right{

width:200px;

background:#AAAAAA;

}

center{

flex:1;

}

content{

flex:1;

background:#fafafa;

display:flex;

flex-direction: row;

height:0;

}

bottom{

height:40px;

background:#666666;

color:#ffffff;

}

top,bottom,left,right,center{

align-items: center;

justify-content: center;

display:flex;

}

</style>

</head>

<body>

<div class="box">

<div class="top">top</div>

<div class="content">

<div class="left">left</div>

<div class="center">center</div>

<div class="right">right</div>

</div>

<div class="bottom">bottom</div>

</div>

</body>

</html>

假设html的代码是这样

<div id="test">
拖拽
<div>

那么一个简单的javascript拖拽的事件是这样,你再根据你的实际需求,进行你的 *** 作
<script>
var div =  documentgetElementById("test");
divonmousedown = function(){
    consolelog("按");
    divonmousemove = function(e){
        consolelog(eclientX);
        consolelog(eclientY);
    }
    divonmouseup=function(){
        consolelog("松开");
        divonmousemove =  "";
    }
}
</script>

你可以在按下移动的时候创建一个div,然后这个div所在的位置根据你拿到的鼠标clientx,y
进行动态改变,然后松开的时候,把这个div删掉,然后实现你的拖拽效果

不考虑IE6的话就比较简单,判断一下是否到底部,到了之后将这个div的position设置为fixed就好了top值是固定的 但是如果要考虑IE6的话就麻烦一点,因为IE6不支持fixed这个属性你只能通过absolute来处理而此时top值是要不停地改变的,而且在IE6中这个div在滚动时会不停晃动,解决方法是有的但是代价过高,看你的取舍

你可以在初始化这些DIV时,就初始化其对应的辅助线。有一个实现的办法就是n个DIV用2n个新的DIV来实现辅助线的效果,具体做法就是,比如HELLO这个DIV,其辅助线的DIV应当有两个:第一个就是left等于HELLO这个DIV的left值,width也与它宽度相等,但高度等于画布高度,BORDER的CSS中,只有左右有,上下无;第二个就是top等于这个DIV的top值,宽度等于画布宽度,高度与DIV的高度相等,BORDER的CSS只有上下在,左右无。

仔细观察发现,今日头条导航部分编辑效果,有以下几个效果

1:点击编辑开启可以编辑的效果(也就是是否开启拖拽)

2:拖拽前选中效果

3:拖动过程中元素移动到目标位置的运动效果

这是VueDraggable作者的git引入之后我们发现VueDraggable默认就是开启拖拽状态的,那我们要控制这个状态怎么办呢?在作者项目的首页,发现并没有详细介绍,是不是有这个状态提供,当然也许是因为自己英语太渣,没有发现这句话(See here for reference)

后来发现,点进去,发现了很多好玩的东西,具体有哪些,这里我们只挑我们需要的,然后我就发现这个东东:

这不就是我们想要的么,如果你认为是这个属性直绑定到组件上,那么你就错了,在往下看,似乎有怎么使用的实例代码,那我们不妨看看是怎么样的:

其实看到这个你大概知道怎么用了,如果还不会那么不着急,我贴一下我的代码你就知道怎用了

嗯就是这么简单,然后你再去控制这个disable就可以,至于怎么控制,接触过vue的人应该都会,就不说了,到这里我们第一个问题就解决,那我后面两个问题呢?

别急,其实和第一个一模一样

还有一些其他配置项的解释:

1ghostClass:'ghostClass';拖拽中占位的元素的类名(一般设置opacity:1)达到空出该位置的视觉效果

2dragClass:'dragClass';元素拖拽中的类名

哈哈就是这么简单,惊不惊喜,意不意外!!!之前之所以,称之为问题是因为,以为那些配置项都是直接配置在组件上的,好了上面三个问题基本算是解决了,其实我们发现,这个过程中烦在哪里,就是知道配置项options是挂在在draggable组件上,那些控制draggable的行为都是在options里面配置的,经验告诉我们,一定要仔细阅读文档,答案都在文档里面,好了,如果能帮助到正在看文章的你

网上有插件,我这也有案例代码,要是贴上来就太多了,我以前写了个放windows窗口的效果,你可以参考一下,代码如下,全部复制出去,修改下jquery库的路劲就可以测试:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/13396118.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-07-28
下一篇 2023-07-28

发表评论

登录后才能评论

评论列表(0条)

保存