时间戳

首页 > 解决方案 > 在 javascript 中创建一个可以从 jQuery UI 拖放的对象

javascript - 在 javascript 中创建一个可以从 jQuery UI 拖放的对象

问题描述

我正在尝试将元素拖放到通过 javascript 创建的 Dropbox 中。每当我将消息放入其中一个蓝色保管箱时，我都想显示一条消息。可悲的是，它不适用于新对象。如果我在 html 代码中创建一个画布，它确实可以工作。感谢您的帮助！

JS 小提琴：https ://jsfiddle.net/tk8sLn9e/

HTML

<html>
<head>
    <link rel="stylesheet" href="StyleSheet.css" />

    <meta charset="utf-8" />
    <title></title>

    <script src="Scripts/jquery-3.3.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.12.1.js" type="text/javascript"></script>
    <script src="JavaScript.js"></script>
</head>
<body>

    <div class="outerContainer">
        <div class="tile">Price</div>
        <div class="tile">Shares Outstanding</div>
        <div class="tile">Market Cap</div>
    </div>

</body>
</html>

JS

$(document).ready(function () {
    $('.tile').draggable({
        helper: 'clone',
        stack: ".tile",
        start: function (event, ui) { createDropBox() },
        stop: function (event, ui) { deleteDropBox() }
    });

    $('.dropContainer').droppable({
        drop: function (event, ui) {alert("alarm")}
    });
})

var dropBoxWidth = 200;
var dropBox1Height = 75;
var dropBoxHeight = 150;

var dropBox1X = 240;
var dropBox1Y = 10;
var dropBox2X = dropBox1X;
var dropBox2Y = dropBox1Y + dropBox1Height + 50;
var dropBox3X = dropBox1X + dropBoxWidth + 100;
var dropBox3Y = dropBox1Y;

function createDropBox() {
    drawRectangle(dropBox1X, dropBox1Y, dropBoxWidth, dropBox1Height, "dropBox1");
    drawRectangle(dropBox2X, dropBox2Y, dropBoxWidth, dropBoxHeight, "dropBox2");
    drawRectangle(dropBox3X, dropBox3Y, dropBoxWidth, dropBoxHeight, "dropBox3");
}

function drawRectangle(left, top, width, height, id) {
    var dropBox = document.createElement("canvas");
    dropBox.style.position = "absolute";
    dropBox.style.left = left + "px";
    dropBox.style.top = top + "px";
    dropBox.style.width = width + "px";
    dropBox.style.height = height + "px";
    dropBox.style.backgroundColor = "#d8ecf3";
    dropBox.style.border = "solid lightblue";
    dropBox.style.borderRadius = "10px";
    dropBox.id = id;
    dropBox.className = "dropContainer";
    document.body.appendChild(dropBox);
}

function deleteDropBox() {
    var element1 = document.getElementById("dropBox1");
    var element2 = document.getElementById("dropBox2");
    var element3 = document.getElementById("dropBox3");
    element1.parentNode.removeChild(element1);
    element2.parentNode.removeChild(element2);
    element3.parentNode.removeChild(element3);
}

标签： javascriptjquery-ui

解决方案

看看下面的代码：

JavaScript

$(function() {
  var boxes = [{
      id: "dropBox1",
      class: "dropContainer",
      props: {
        top: 10,
        left: 240,
        width: 200,
        height: 75
      }
    },
    {
      id: "dropBox2",
      class: "dropContainer",
      props: {
        top: 225,
        left: 240,
        width: 200,
        height: 150
      }
    }, {
      id: "dropBox3",
      class: "dropContainer",
      props: {
        top: 10,
        left: 440,
        width: 200,
        height: 150
      }
    }
  ];

  function drawRectangle(l, t, w, h, id, cn) {
    $("<div>", {
        id: id,
        class: cn
      })
      .css({
        position: "absolute",
        top: t + "px",
        left: l + "px",
        width: w + "px",
        height: h + "px",
        "background-color": "#D8ECF3",
        border: "10px solid lightblue"
      })
      .appendTo("body");
  }

  function makeDropTarget($t) {
    $t.droppable({
      drop: function(event, ui) {
        console.log("DROP:", ui.draggable.text(), "ON:", $(this).attr("id"));
      }
    });
  }

  function createDropBoxes(d) {
    $.each(d, function(k, box) {
      console.log("Create Rect:", box);
      drawRectangle(box.props.left, box.props.top, box.props.width, box.props.height, box.id, box.class);
      makeDropTarget($("#" + box.id));
    });
  }

  function deleteDropBoxes(d) {
    $.each(d, function(k, box) {
      $("#" + box.id).remove();
    });
  }

  $('.tile').draggable({
    helper: 'clone',
    stack: ".tile",
    start: function(event, ui) {
      createDropBoxes(boxes);
    },
    stop: function(event, ui) {
      deleteDropBoxes(boxes);
    }
  });
});

工作示例：https ://jsfiddle.net/Twisty/wLrj3k08/

我建议使用所有原生 JavaScript 或所有 jQuery。当您不在代码中混淆两者时，它会变得更容易。

我还建议将所有盒子数据包含在对象数组中。使迭代和存储等变得更容易。它不需要那么复杂，但在我看来，这只是让它更容易使用。

善用函数会有很大帮助。我喜欢让它们保持简单，以便在很多情况下都易于使用。所以我们有：

  • drawRectangle(l, t, w, h, id, cn)<div>-使用给定的属性制作并附加
  • makeDropTarget($t)- 使用 jQuery 对象作为目标，使目标可放置
  • createDropBoxes(d)- 根据特定的盒子数据（对象数组）创建大量的下拉框
  • deleteDropBoxes(d)- 根据特定数据（对象数组）删除大量下拉框

您可能想为单个目标创建和删除函数，但您也可以使用它来执行此操作：

deleteDropBoxes([{id: "dropBox1"}]);

这可以按 ID 删除其中一个放置目标。

希望这可以帮助。

推荐阅读