建议在so DIV也可以是拖放区域的地方编写/扩展JQuery拖放

Advice to write/extend JQuery drag and drop where so DIVs can also be drop zones

本文关键字：拖放 方编写 JQuery 扩展 区域 so DIV 也可以      更新时间：2023-09-26

我是一名JQuery新手，也是一名中等能力的JS程序员。我想写一个JQuery插件，这样我就可以将一个DIV拖放到另一个DIV.如果另一个DIV不是dropzone，那么它只调用我选择的函数。也许将一个可拖动的DIV放到另一个已存在的可拖动DIV上是完美的，但我还没有找到。

如果它不存在，我希望得到关于实施的建议。

我是否跟踪每个DIV的x、y位置和尺寸，以便当一个DIV被放置到另一个DIV（可能是也可能不是放置区）上时，我可以确定它被放置在哪个DIV上？

我应该使用JQuery吗？对我的方法有任何其他建议也将不胜感激！

这似乎很有趣，所以我写了一段代码，其中涵盖了您想要的基本内容。不想让它变得过于复杂，所以在本例中，您可以在容器区域内拖动框，然后将box1放入box2。

这应该掩盖了整个想法，从现在开始，您可以编写函数来分离框、应用额外的样式等。不过，还可以更好地使用事件侦听器。

小提琴在这儿：http://jsfiddle.net/6LV25/

来源：

<!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>
相关文章：