javascript - 我们如何通过将 HTML 元素拖放到另一列中来克隆它(仅在该列中而不是在其外部)

Question

我正在 HTML 5 中进行拖放工作。有人建议我使用 jquery-ui，因为他们已经实现了很多东西。

我现在只能将任何 HTML 元素拖放到一列中，但我希望能够将任何 HTML 元素从一列克隆到另一列。我希望原始元素也保留在其原始列中。

这个概念显示在this example中.

在此示例中，“test”div 可以克隆并放置在任何位置，但我只能将其放置在“drop”列中 - 它可以放置在此列中的任何位置。

拖放后，我还想调整它的大小，更改位置，将大小、宽度、高度等属性保存在文件或数据库中。

Answer 1

需要开始的一些修复:

var b=parseInt($(this.width));

这失败了。我建议:

var b = parseInt($(this).width());

这将返回 this 的宽度值然后将其解析为整数。您可能需要考虑parseFloat()以防万一您有一个宽度为 30.5 像素的奇怪大小的元素。

你的可拖动对象中有很多不需要的东西。将其更改为:

  $('.test').draggable({
    helper: "clone",
    revert: "invalid"
  }).click(function() {
    var b = parseInt($(this).width());
    $(this).css('width', b + 5);
  });

您需要向 droppable 添加更多内容才能获得所需的内容。

  $('#drop').droppable({
    accept: ".test",
    drop: function(e, u) {
      var a = u.helper.clone();
      console.log("INFO: Accepted: ", a.attr("class"));
      a.css("z-index", 1000);
      a.appendTo("#drop");
      a.attr('class', 'dropped').draggable({
        containment: "#drop"
      });
    }
  });

我将 CSS 移至它自己的部分，这样您就不必调整每个元素的 CSS。

我还添加了双击 .dropped 时调整大小元素。

这里是所有内容和一个工作示例:https://jsfiddle.net/Twisty/u172wuer/

HTML

<div class="test red square"></div>
<div id="drop"></div>

CSS

.test {
  width: 50px;
  height: 50px;
  background-color: red;
}

#drop {
  width: 200px;
  height: 200px;
  background-color: green;
}

.dropped {
  width: 50px;
  height: 50px;
  background-color: blue;
}

jQuery

$(document).ready(function() {
  $('.test').draggable({
    helper: "clone",
    revert: "invalid"
  }).click(function() {
    var b = parseInt($(this).width());
    $(this).css('width', b + 5);
  });
  $('#drop').droppable({
    accept: ".test",
    drop: function(e, u) {
      var a = u.helper.clone();
      console.log("INFO: Accepted: ", a.attr("class"));
      a.css("z-index", 1000);
      a.appendTo("#drop");
      a.attr('class', 'dropped').draggable({
        containment: "#drop"
      }).dblclick(function() {
        // Enabled Resize on element when double clicked
        $(this).resizable();
      });
    }
  });
  $(document).click(function() {
    if ($(".dropped").length) {
      // Disabled Resize on all elements when #drop
      $(".ui-resizable").resizable("destroy");
    }
  });
});

希望这就是您开车的目的，但从您的帖子中并不清楚。欢迎评论。

更新

根据您的评论，您正在寻找更高级的东西。 <button> 等元素的问题或<input>就其本质而言，您单击它们，事件就会绑定(bind)到该元素。

为了能够实现这一点，我建议您用 <div> 包装该元素。给你一些东西来移动元素、调整大小等等。在以下示例中，所有元素仍然处于事件状态，因此它们在掉落时处于事件状态。

工作示例:https://jsfiddle.net/5yd6uu45/20/

HTML

<div class="elements">
  <div class="new button-wrapper element ui-widget-content ui-corner-all" data-item-type="button">
    <span class="side-handle ui-icon ui-icon-grip-dotted-vertical"></span>
    <button class="" title="">New Button</button>
  </div>
  <div class="new textbox-wrapper element ui-widget-content ui-corner-all" data-item-type="input[type='text']">
    <span class="side-handle ui-icon ui-icon-grip-dotted-vertical"></span>
    <input type="text" class="" title="" placeholder="New Textbox" />
  </div>
  <div class="new label-wrapper element ui-widget-content ui-corner-all" data-item-type="label">
    <span class="side-handle ui-icon ui-icon-grip-dotted-vertical"></span>
    <label class="" title="">New Label</label>
  </div>
</div>
<div id="drop"></div>

<div id="dialog-settings" title="Edit Settings">
  <p class="validateTips"></p>
  <form>
    <fieldset>
      <label for="idValue">Element ID</label>
      <input type="text" name="idValue" id="idValue" class="text ui-widget-content ui-corner-all" data-attr-name="id" />
      <label for="titleValue">Element Title</label>
      <input type="text" name="titleValue" id="titleValue" class="text ui-widget-content ui-corner-all" data-attr-name="title" />
      <label for="titleValue">Element Class</label>
      <input type="text" name="classValue" id="classValue" class="text ui-widget-content ui-corner-all" data-attr-name="class" />
      <label for="innerText">Text</label>
      <input type="text" name="innerText" id="innerText" class="text ui-widget-content ui-corner-all" data-attr-name="text" />
      <label for="eventType">Event</label>
      <select id="eventType">
        <option></option>
        <option>onBlur</option>
        <option>onClick</option>
        <option>onChange</option>
        <option>onFocus</option>
      </select>
      <label for="eventValue">Script</label>
      <input type="text" name="eventValue" id="eventValue" class="text ui-widget-content ui-corner-all" />

      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

CSS

.elements {
  margin: 3px;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #666;
  position: relative;
}

.elements div.element {
  display: inline-block;
  padding: 3px;
  padding-right: 6px;
  margin: 0;
}

.side-handle {
  display: inline-block;
  width: 10px;
  height: 20px;
  margin-bottom: -5px;
  cursor: grab;
}

.top-handle {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -8px;
  cursor: grab;
}

.top-settings {
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

.top-delete {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -16px;
  cursor: pointer;
}

.form-wrapper form {
  display: inline-block;
  height: 19px;
  border: 1px dashed #222;
  padding: 1px 3px;
}

#drop {
  width: 500px;
  height: 340px;
  background-color: #ddd;
  border: 1px solid #aaa;
  border-radius: 12px;
  margin: 3px;
}

#drop div.element {
  display: block;
  padding: 3px;
  padding-top: 16px;
  margin: 0;
}

#drop div.element form,
#drop div.element button,
#drop div.element input,
#drop div.element label {
  width: 100%;
  height: 100%;
}

#dialog-settings {
  font-size: 62.5%;
}

#dialog-settings label,
#dialog-settings input {
  display: block;
}

#dialog-settings input.text {
  margin-bottom: 12px;
  width: 95%;
  padding: .4em;
}

#dialog-settings select {
  margin-bottom: 12px;
  width: 95%;
}

#dialog-settings fieldset {
  padding: 0;
  border: 0;
  margin-top: 25px;
}

.ui-dialog .ui-state-error {
  padding: .3em;
}

.validateTips {
  border: 1px solid transparent;
  padding: 0.3em;
}

jQuery

var tmpElement;
$(document).ready(function() {
  $('.new').draggable({
    helper: "clone",
    revert: "invalid"
  });

  $('#drop').droppable({
    accept: ".new",
    drop: function(e, u) {
      var a = u.helper.clone();
      console.log("INFO: Accepted: ", a.data("item-type"));
      a.appendTo("#drop");
      makeId(a.find(a.data("item-type")));
      a.removeClass("new");
      a.find(".side-handle").remove();
      var handle, set, rem;
      handle = $("<span>", {
        title: "Double-click to resize",
        class: "top-handle ui-icon ui-icon-grip-dotted-horizontal"
      });
      set = $("<span>", {
          title: "Click to Edit settings",
          class: "top-settings ui-icon ui-icon-gear"
        })
        .click(function() {
          var $wrpr = $(this).parent();
          var elType = $wrpr.data("item-type");
          var $tElem = $wrpr.find(elType);
          var inText = $tElem.text().trim();
          var elId = $tElem.attr("id");
          var elTitle = $tElem.attr("title");
          var elClass = $tElem.attr("class");
          var elEvent = false,
            elScript = "";
          switch (true) {
            case $tElem.is("[onblur]"):
              elEvent = "onBlur";
              break;
            case $tElem.is("[onclick]"):
              elEvent = "onClick";
              break;
            case $tElem.is("[onchange]"):
              elEvent = "onChange";
              break;
            case $tElem.is("[onfocus]"):
              elEvent = "onFocus";
              break;
          }
          if (elEvent) {
            elScript = $tElem.attr(elEvent);
          }
          if (elType == "input[type='text']") {
            inText = $(this).parent().find(elType).attr("placeholder");
          }
          tmpElement = $(this).parent().find(elType);
          console.log("INFO: Editing " + tmpElement.prop("outerHTML"));
          $("#dialog-settings #idValue").val(elId);
          $("#dialog-settings #titleValue").val(elTitle);
          $("#dialog-settings #classValue").val(elClass);
          $("#dialog-settings #innerText").val(inText);
          if (elEvent) {
            $("#dialog-settings #eventType").val(elEvent);
            $("#dialog-settings #eventValue").val(elScript)
          }
          $("#dialog-settings").dialog("open");
        });
      rem = $("<span>", {
          title: "Click to Delete element",
          class: "top-delete ui-icon ui-icon-close"
        })
        .click(function() {
          $(this).parent().remove();
        });
      a.append(handle, set, rem);
      a.addClass('dropped').draggable({
        containment: "#drop"
      }).dblclick(function() {
        // Enabled Resize on element when double clicked
        var thisEl = $(this).data("item-type");
        $(this).resizable({
          alsoResize: ".dropped " + thisEl
        });
      });
    }
  });

  $("#dialog-settings").dialog({
    autoOpen: false,
    height: 425,
    width: 350,
    modal: true,
    buttons: {
      "Update": saveEl,
      Cancel: function() {
        $(this).dialog("close");
      }
    },
    close: function() {
      $("#dialog-settings form")[0].reset();
      $("#dialog-settings .text").removeClass("ui-state-error");
    },
    open: function() {
      console.log("INFO: Settings Dialog opened.");
    }
  });

  $("#dialog-settings form").submit(saveEl);

  function saveEl() {
    var target = tmpElement,
      data = {};
    $("#dialog-settings .text").removeClass("ui-state-error");
    $("#dialog-settings .text").each(function(k, v) {
      data[$(v).data("attr-name")] = $(v).val();
    });
    if (data.id == null || data.id == "undefined" || data.id == "") {
      var c = $("#drop " + target.parent().data("item-type")).length;
      data.id = target.parent().data("item-type") + "-" + c;
    }
    if (validId(data.id)) {
      target.attr({
        id: data.id,
        title: data.title,
        class: data.class
      });
      if ($("#eventType").val() != "") {
        target.attr($("#eventType").val(), $("#eventValue").val());
      } else {
        target.attr({
          onBlur: "",
          onClick: "",
          onChange: "",
          onFocus: ""
        });
      }
      if (target.parent().data("item-type") == "input[type='text']") {
        target.attr("placeholder", data.text);
      } else {
        target.text(data.text);
      }
      $("#dialog-settings").dialog("close");
      console.log("INFO: Element " + data.id + " updated.");
    } else {
      $("#idValue").addClass("ui-state-error");
      updateTips("ID must be unique.");
    }
    return false;
  }

  function validId(str) {
    var valid = true;
    $("#drop div").each(function(k, v) {
      var el = $(v).data("item-type");
      var target = $(v).find(el);
      if (target.find("[id='" + str + "']").length) {
        valid = false;
        console.log("ERROR: Invalid Element ID.");
      }
    });
    return valid;
  }

  function updateTips(t) {
    $(".validateTips").text(t)
      .addClass("ui-state-highlight");
    setTimeout(function() {
      $(".validateTips").removeClass("ui-state-highlight", 1500);
    })
  }

  function makeId(t, str) {
    var c = $("#drop " + $(t).parent().data("item-type")).length;
    if (str == "undefined" || str == "" || str == null) {
      console.log("INFO: Generating ID.");
      if ($(t).parent().data("item-type").indexOf("input") == 0) {
        $(t).attr("id", "input-" + c);
      } else {
        $(t).attr("id", $(t).parent().data("item-type") + "-" + c);
      }
    } else {
      console.log("INFO: ID was passed.");
      $(t).attr("id", str);
    }
    console.log("INFO: Assigned ID '" + $(t).attr("id") + "' to " + $(t).parent().data("item-type"));
  }

  $(document).click(function() {
    if ($(".dropped").length) {
      // Disabled Resize on all elements when #drop
      $(".ui-resizable").resizable("destroy");
    }
  });
});

正如您所看到的，代码量显着增加。现在您也可以通过很多其他方式来做到这一点。您现在还必须了解如何保存元素、它们的所有属性以及它们的位置。因此，由于这可能超出了您的预期，因此它实际上并没有真正触及您所建议的要实现的目标的表面。