Question

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

如果它不存在，我想要实施建议。

我是否记录每个DIV的x，y位置和尺寸，这样当DIV掉落到另一个DIV（可能是也可能不是dropzone）时，我可以确定它被丢弃的DIV？

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

Answer 1

这看起来很有趣所以我写了一个代码，它涵盖了你想要的基础知识。不想让它过于复杂，所以在这个例子中，你可以在容器区域内拖动框，你可以将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>

写入/扩展JQuery的建议拖放，因此DIV也可以是拖放区域

1 个答案: