<html><head>
<meta charset="utf-8">
<title>通过拖放实现添加、删除</title>
<style type="text/css">
.list,.copylist{
display:inline-block;
/* padding:10px; */
background-color:#aaa;
/* margin:3px; */
border:1px solid;
}
.copylist{position: relative;cursor: move;width: 100px;height: 40px;}
.close{background-color: #fff;color: #000;position: absolute;
right: 0;top:0;z-index: 100;
border:1px solid #ccc;}
</style>
</head>
<body style="">
<script src="./jquery.min.js"></script>
<script type="text/javascript">
var cancelNodeName = [ "INPUT", "TEXTAREA", "BUTTON" ];
$.fn.extend({
Drag : function() {
$(this).mousedown(function(e) {
//如果元素是input，textarea或者button则不能拖动
if (cancelNodeName.indexOf(e.target.nodeName) >= 0)
return true;
e.stopPropagation(); //阻止冒泡
var currentTarget = $(this);
var currentDisX = e.pageX;
var currentDisY = e.pageY;
var childL = $(this).position().left;
var childT = $(this).position().top;
var childW=$(this).width();
var childH=$(this).height();
//父元素
var oparent=$(this).parent();
var parentW=oparent.width();
var parentH=oparent.height();
var disR=parentW-childW-childL;
var disL=childL;
var disT=childT;
var disB=parentH-childH-childT;
var mousemoveEvent = function(event) {
currentTarget.attr("moved", 1);
currentTarget.css("position", "absolute");
currentTarget.css("cursor", "move");
//鼠标位置
var currentX = event.clientX;
var currentY = event.clientY;
var cursorX = event.pageX - currentDisX; //鼠标移动的x距离
var cursorY = event.pageY - currentDisY; // 鼠标移动的y距离
if(cursorX>0){if(cursorX>disR){cursorX=disR;}}
if(cursorX<0){if(cursorX<-disL){cursorX=-disL;}}
if(cursorY>0){if(cursorY>disB){cursorY=disB;}}
if(cursorY<0){if(cursorY<-disT){cursorY=-disT;}}
$(currentTarget).css("top", childT+cursorY + "px").css("left", childL+cursorX + "px");
};
$(document).on("mousemove", mousemoveEvent);
var mouseupEvent = function() {
$(document).off("mousemove", mousemoveEvent);
$(document).off("mouseup", mouseupEvent);
}
$(document).on("mouseup", mouseupEvent);
});
},
DisDrag : function() {
$(this).attr("isDrag", 0);
$(this).attr("drag", 0);
},
Resize : function(opts) {
var options={
mode:{"se-resize":0,"e-resize":1,"s-resize":2,"n-resize":3,"w-resize":4}
};
var currentTarget = $(this);
var currentDisTance = 5;
var resizeMode = 0;
var isResize = false;
var isStartResize = false;
// 创建3个div来实现resize。
$(this).append("<div class='resizable'style='cursor:e-resize;width:7px;right:-5px;height:100%;top:0;z-index:99;position:absolute;'></div>");
$(this).append("<div class='resizable'style='cursor:w-resize;width:7px;left:-5px;height:100%;top:0;z-index:99;position:absolute;'></div>");
$(this).append("<div class='resizable' style='cursor:s-resize;height:7px;bottom:-5px;width:100%;left:0;z-index:99;position:absolute;'></div>");
$(this).append("<div class='resizable' style='cursor:n-resize;height:7px;top:-5px;width:100%;left:0;z-index:99;position:absolute;'></div>");
$(this).append("<div class='resizable' style='cursor:se-resize;width:16px;height:16px;z-index:99;right:1px;bottom:1px;position:absolute'></div>");
$(this).mousedown(function(e) {
if (cancelNodeName.indexOf(e.target.nodeName) >= 0)
return true;
if($( e.target ).closest( ".resizable" ).length <=0)
return true;
e.stopPropagation(); //阻止冒泡
var currentDisX = e.pageX;
var currentDisY = e.pageY;
//父元素
var oparent=$(this).parent();
var parentW=oparent.width();
var parentH=oparent.height();
var width=$(this).width();
var height=$(this).height();
var childL = $(this).position().left;
var childT = $(this).position().top;
var childR = parentW-width-childL;
var childB =parentH-height-childT;
//去除margin与padding的影响
var disR=parentW-childL;
var disL=parentW-childR;
var disT=parentH-childB;
var disB=parentH-childT;
var rmousemoveEvent = function(event) {
/*var currentX = event.clientX;
var currentY = event.clientY;*/
var cursorX = event.pageX - currentDisX; //鼠标移动的x距离
var cursorY = event.pageY - currentDisY; // 鼠标移动的y距离
var cursorW=width-cursorX;
var cursorH=height-cursorY;
var cursorW2=width+cursorX;
var cursorH2=height+cursorY;
var resizeMode=options.mode[$(e.target).css("cursor")];
if (resizeMode == 0){
if(cursorH2>disB){cursorH2=disB;}
if(cursorW2>disR){cursorW2=disR;}
$(currentTarget).css("height", cursorH2 + "px").css("width", cursorW2 + "px").css("top",childT+"px").css("left",childL+"px");
}
else if (resizeMode == 1){//right
if(cursorW2>disR){cursorW2=disR}
$(currentTarget).css("width", cursorW2 + "px").css("top",childT+"px").css("left",childL+"px");
}
else if(resizeMode == 2){//bottom
if(cursorH2>disB){cursorH2=disB;}
$(currentTarget).css("height", cursorH2 + "px").css("top",childT+"px").css("left",childL+"px");
}
else if(resizeMode == 3){//top
if(cursorH>(disT)){cursorH=disT;}
$(currentTarget).css("height", cursorH + "px").css("bottom",childB + "px").css("left",childL+"px");
}
else if (resizeMode == 4){//left
if(cursorW>(disL)){cursorW=disL;}
$(currentTarget).css("width", cursorW + "px").css("right",childR + "px").css("top",childT+"px");
}
};
$(document).on("mousemove", rmousemoveEvent);
var rmouseupEvent = function(event) {
$(document).off("mousemove", rmousemoveEvent);
$(document).off("mouseup", rmouseupEvent);
};
$(document).on("mouseup", rmouseupEvent);
e.preventDefault();
});
}
});
</script>
<div style="width:600px;border:1px solid black;">
<h2>可将你喜欢的项目拖进收藏夹</h2>
<div draggable="true" class="list" ondragstart="dsHandler(event);">项目1</div>
<div draggable="true" class="list" ondragstart="dsHandler(event);">项目2</div>
<div draggable="true" class="list" ondragstart="dsHandler(event);">项目3</div>
<div draggable="true" class="list" ondragstart="dsHandler(event);">项目4</div>
<div draggable="true" class="list" ondragstart="dsHandler(event);">项目5</div>
</div>
<div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;position: relative;">
<h2 ondragleave="return false">收藏夹</h2>
</div>
<script type="text/javascript">
//删除元素
function removeElementDiv(el){
var oparent=el.parent();
oparent.remove();
}
var btn="<button class='close' onclick='removeElementDiv($(this));'>X</button>"
var dest = document.getElementById("dest");
//开始拖动事件的事件监听器
var dsHandler = function(evt){
//将被拖动元素的innerHTML属性值设置成被拖动的数据
//设置“Text”兼容性考虑
evt.dataTransfer.setData("Text","<item>" + evt.target.innerHTML);
}
//cancel propagation
function cancelPropagation(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
function myOnDrop(evt,dest){
cancelPropagation(evt);
//放在火狐浏览器拖拽时打开新页面
evt.preventDefault();
var text = evt.dataTransfer.getData("Text");
//如果text以<item>开头
if(text.indexOf("<item>") == 0){
//创建一个新的div元素
var newEle = document.createElement("div");
//以当前时间为该元素生成一个唯一的ID
newEle.id = new Date().getUTCMilliseconds();
newEle.setAttribute("class","copylist");
//该元素内容为“拖”过来的数据
newEle.innerHTML = text.substring(6);
//设置该元素允许拖动
//console.log($(newEle));
$(newEle).Drag();
$(newEle).Resize();
//给元素添加删除按钮
var closebtn=$(btn);
$(newEle).append(closebtn);
newEle.ondrop = function(evt){
myOnDrop(evt,newEle);
}
dest.appendChild(newEle);
}
}
dest.ondrop = function(evt){
myOnDrop(evt,dest);
}
document.ondragover = function(evt)
{
// 取消事件的默认行为
return false;
}
document.ondragleave = function(evt){
//取消被拖动的元素离开本元素时触发该事件
return false;
}
document.ondrop = function(evt)
{
// 取消事件的默认行为
return false;
}
</script>
</body></html>