Javascript 建议编写/扩展JQuery拖放，其中sodiv也可以是拖放区
我是一个JQuery新手，有一定的JS程序员能力。我想写一个JQuery插件，这样我可以将一个DIV拖放到另一个DIV上。如果另一个DIV不是dropzone，那么它只调用我选择的函数。也许将一个可拖动的DIV放到另一个可拖动的DIV上已经存在，这将是完美的，但我还没有找到它 如果它不存在，我需要关于实现的建议 我是否跟踪每个DIV的x、y位置和尺寸，以便在将一个DIV放到另一个DIV（可能是也可能不是dropzone）上时，我可以确定该DIV落在哪个DIV上Javascript 建议编写/扩展JQuery拖放，其中sodiv也可以是拖放区,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我是一个JQuery新手，有一定的JS程序员能力。我想写一个JQuery插件，这样我可以将一个DIV拖放到另一个DIV上。如果另一个DIV不是dropzone，那么它只调用我选择的函数。也许将一个可拖动的DIV放到另一个可拖动的DIV上已经存在，这将是完美的，但我还没有找到它 如果它不存在，我需要关于实现的建议 我是否跟踪每个DIV的x、y位置和尺寸，以便在将一个DIV放到另一个DIV（可能是也可能不是dropzone）上时，我可以确定该DIV落在哪个DIV上 我是否应该使用JQuery来实现这
我是否应该使用JQuery来实现这一点？如果您对我的方法有任何其他建议，我们将不胜感激 这似乎很有趣，所以我写了一段代码，涵盖了您想要的基本内容。不想让它过于复杂，所以在本例中，您可以在容器区域内拖动框，然后将box1放入box2 这应该涵盖了整个想法，从这里开始，您可以编写函数来分离框，应用额外的样式等，并更好地使用事件侦听器 这是小提琴： 以下是消息来源：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>BoxCeption</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function()
{
//first let's make boxes movable, they can only be moved, when one of them, is clicked upon
//in order to move it, we will dynamically change it's top,left values
//based upon cursor x,y coordinates
//define some variables
var lastX;
var lastY;
var current_selected_box_left;
var current_selected_box_top;
var is_selected = false;
var clicked_box_id;
var boxOffsetx;
var boxOffsety;
var isoverbox2 = false;
var container_width = 600;
var container_height = 480;
//set container size
jQuery("#container").css({width : container_width, height : container_height});
var parentOffset = jQuery("#container").offset();
//when you have clicked on box
jQuery(".draggableBox").on("mousedown",function()
{
is_selected = true;
clicked_box_id = "#" + jQuery(this).attr("id");
});
jQuery(".draggableBox").on("mouseup",function()
{
is_selected = false;
clicked_box_id = "";
if(isoverbox2 == true)
{
jQuery("#box1").appendTo("#box2");
jQuery("#box1").css({left : "20px", top : "20px"});
}
});
//prevent boxes from going outside the container
jQuery("#container").on("mousemove",function(event)
{
if(is_selected)
{
boxOffsetx = jQuery(clicked_box_id).width()/2;
boxOffsety = jQuery(clicked_box_id).height()/2;
//if still in container area
if(parseInt(jQuery(clicked_box_id).css("left")) < container_width-boxOffsetx && parseInt(jQuery(clicked_box_id).css("top")) < container_height-boxOffsety && parseInt(jQuery(clicked_box_id).css("left")) > 0 && parseInt(jQuery(clicked_box_id).css("top")) > 0)
{
jQuery(clicked_box_id).css({left : event.pageX-parentOffset.left-boxOffsetx + "px",top : event.pageY-parentOffset.top-boxOffsety + "px"});
}
else if(parseInt(jQuery(clicked_box_id).css("left")) >= container_width-boxOffsetx)
{
jQuery(clicked_box_id).css({left : container_width-boxOffsetx-1 + "px",top : event.pageY-parentOffset.top-boxOffsety + "px"});
}
else if(parseInt(jQuery(clicked_box_id).css("left")) <= 0)
{
jQuery(clicked_box_id).css({left : 1 + "px",top : event.pageY-parentOffset.top-boxOffsety + "px"});
}
else if(parseInt(jQuery(clicked_box_id).css("top")) >= container_height-boxOffsety)
{
jQuery(clicked_box_id).css({left : event.pageX-parentOffset.left-boxOffsetx + "px",top : container_height-boxOffsety-1 + "px"});
}
else if(parseInt(jQuery(clicked_box_id).css("top")) <= 0)
{
jQuery(clicked_box_id).css({left : event.pageX-parentOffset.left-boxOffsetx + "px",top : 1 + "px"});
}
}
//if box1 clicked and dragged into box2
if(clicked_box_id == "#box1")
{
if(jQuery('#box2:hover').length > 0)
{
jQuery("#box2").css("border","1px solid green");
isoverbox2 = true;
}
else
{
jQuery("#box2").css("border","1px solid black");
isoverbox2 = false;
}
}
});
});
</script>
<style>
html
{
font-family: Times New Roman;
font-size: 12px;
color: black;
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
}
#container{border: 1px solid black; position: relative; margin-left: auto; margin-right: auto;margin-top: 100px;}
#box1{width: 100px;height: 100px; border: 1px solid blue; position: absolute; top: 200px; left: 200px;}
#box2{width: 150px;height: 150px; border: 1px solid black; position: absolute; top: 200px; left: 350px;}
</style>
</head>
<body>
<div id="container">
Container
<div id="box1" class="draggableBox">box1</div>
<div id="box2" class="draggableBox">box2</div>
</div>
</body>
</html>
箱概念
jQuery（文档）.ready（函数（）
{
//首先，让我们使框可移动，它们只能移动，当其中一个，是点击
//为了移动它，我们将动态地更改它的左上角值
//基于光标x、y坐标
//定义一些变量
var lastX；
血管成形术；
var current_selected__box_left；
var current\u selected\u box\u top；
var被选中=错误；
var单击\u框\u id；
var boxOffsetx；
var-boxOffsety；
var isoverbox2=假；
var容器_宽度=600；
var容器高度=480；
//设置容器大小
jQuery（“#container”）.css（{width:container_width，height:container_height}）；
var parentOffset=jQuery（“#容器”）.offset（）；
//当你点击盒子时
jQuery（“.draggableBox”）.on（“mousedown”，function（））
{
是否选中=真；
单击_-box_-id=“#”+jQuery（this.attr（“id”）；
});
jQuery（“.draggableBox”）.on（“mouseup”，function（））
{
是否选中=错误；
单击了“框”和“id=”；
if（isoverbox2==true）
{
jQuery（“#box1”）。附加到（#box2”）；
css（{左：“20px”，顶部：“20px”}）；
}
});
//防止箱子从容器外面出去
jQuery（“#容器”）.on（“mousemove”，函数（事件）
{
如果（已选中）
{
boxOffsetx=jQuery（单击了\u box\u id）.width（）/2；
boxOffsety=jQuery（单击了\u box\u id）.height（）/2；
//如果仍在集装箱区
如果（parseInt（jQuery（clicked_-box_-id）.css（“左”）0&&parseInt（jQuery（clicked_-box_-id.css（“顶”）>0）
{
css（{left:event.pageX-parentOffset.left-boxOffsetx+“px”，top:event.pageY-parentOffset.top-boxOffsety+“px”}）；
}
else if（parseInt（jQuery（单击了_-box _-id）.css（“左”）>=容器_-width-boxOffsetx）
{
css（{left:container\u width-boxOffsetx-1+“px”，top:event.pageY-parentOffset.top-boxOffsety+“px”}）；
}
else if（parseInt（jQuery（单击了[u-box\u-id）.css（“左”））=container\u height-boxOffsety）
{
css（{left:event.pageX-parentOffset.left-boxOffsetx+“px”，top:container\u height-boxOffsety-1+“px”}）；
}
elseif（parseInt（jQuery（单击了框id）.css（“top”））0）
{
jQuery（“#box2”）.css（“边框”、“1px纯绿色”）；
isoverbox2=真；
}
其他的
{
jQuery（“#box2”）.css（“边框”，“1px纯黑”）；
isoverbox2=假；
}
}
});
});
html
{
字体系列：时代新罗马；
字体大小：12px；
颜色：黑色；
身高：100%；
}
身体
{
身高：100%；
边际：0px；
填充：0px；
}
#容器{边框：1px纯黑色；位置：相对；左侧边距：自动；右侧边距：自动；顶部边距：100px；}
#框1{宽度：100px；高度：100px；边框：1px纯蓝色；位置：绝对；顶部：200px；左侧：200px；}
#框2{宽度：150px；高度：150px；边框：1px纯黑色；位置：绝对；顶部：200px；左侧：350px；}
容器
框1
框2