个人中心
gpt4 book ai didi

javascript - 建议编写/扩展 JQuery 拖放功能，以便 DIV 也可以成为拖放区域

转载 作者：行者123 更新时间：2023-12-01 05:50:17 25 4
gpt4 key购买 nike

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

如果它不存在，我想要有关实现的建议。

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

我是否应该使用 JQuery 来执行此操作？对我的方法的任何其他建议也将不胜感激!

最佳答案

这看起来很有趣，所以我编写了一个代码，其中涵盖了您想要的基础知识。不想让它变得过于复杂，所以在这个例子中，你可以将盒子拖到容器区域内，然后你可以将盒子1放入盒子2中。

这应该掩盖了整体的想法，从这里开始，您可以编写函数来分离框、应用额外的样式等。不过最好使用事件监听器。

这是 fiddle :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>

关于javascript - 建议编写/扩展 JQuery 拖放功能，以便 DIV 也可以成为拖放区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22965156/

25 4 0
文章推荐： android - 下拉菜单 Bootstrap 在平板电脑 Android 中不起作用
文章推荐： java - 为什么 guice 不注入(inject)之前实例化的 @SessionScoped 对象？
文章推荐： Kotlin 使用 Android Studio 查找代码中的所有硬编码字符串
文章推荐： google-app-maker - Google App Maker/sql 实例位置和 GDPR
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com