Question

现在我的程序可以动态创建正方形行（2行12行）。当您双击其中一个方块时，会弹出一个颜色选择器，然后您可以指定该方块的颜色。

但是，我正在尝试实现一个“快捷方式”，这样如果您将已经着色的方块拖到另一个方块上，那么新的方块也将被着色。

到目前为止我做了什么：

var id_num = 1;
var picker = null;
$(function () {
$(document).on('click', ".repeat", function (e) {
    e.preventDefault();
    var $self = $(this);
    var $parent = $self.parent();
    if($self.hasClass("add-bottom")){
      $parent.after($parent.clone(true).attr("id", "repeatable" + id_num));
      id_num = id_num + 1;
      //picker = null;

    } else {
      $parent.before($parent.clone(true).attr("id", "repeatable" + id_num));
      id_num = id_num + 1;
      //picker = null;
    }
});   
});

$(".startLEDs").draggable({
revert:true
});

我曾尝试使用JQuery中的可拖动功能但注意到当我尝试拖动框时，整个div都会消失。而且，我也只希望这些盒子可以拖拽和放置，没有别的。

非常感谢任何帮助或反馈！

Answer 1

这是我到目前为止所做的，但由于id属性在克隆后不是唯一的，因此它有一些怪癖。

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

<强> HTML

<div class="bottomdiv">
  <div class="container">
    <div id="repeatable-0">
      <button class="repeat add-top">Add above</button>
      <ul class="repeatable">
        <li class="startLEDs" id="sLED1"></li>
        <li class="startLEDs" id="sLED2"></li>
        <li class="startLEDs" id="sLED3"></li>
        <li class="startLEDs" id="sLED4"></li>
        <li class="startLEDs" id="sLED5"></li>
        <li class="startLEDs" id="sLED6"></li>
        <li class="startLEDs" id="sLED7"></li>
        <li class="startLEDs" id="sLED8"></li>
        <li class="startLEDs" id="sLED9"></li>
        <li class="startLEDs" id="sLED10"></li>
        <li class="startLEDs" id="sLED11"></li>
        <li class="startLEDs" id="sLED12"></li>
        <li class="endLEDs" id="eLED1"></li>
        <li class="endLEDs" id="eLED2"></li>
        <li class="endLEDs" id="eLED3"></li>
        <li class="endLEDs" id="eLED4"></li>
        <li class="endLEDs" id="eLED5"></li>
        <li class="endLEDs" id="eLED6"></li>
        <li class="endLEDs" id="eLED7"></li>
        <li class="endLEDs" id="eLED8"></li>
        <li class="endLEDs" id="eLED9"></li>
        <li class="endLEDs" id="eLED10"></li>
        <li class="endLEDs" id="eLED11"></li>
        <li class="endLEDs" id="eLED12"></li>
      </ul>
      <div class="timeMilli">Time(ms):
        <input type="text" name="time" form="form1">
      </div>
      <button class="repeat add-bottom">Add below</button>
    </div>
  </div>
</div>

我正在考虑使用sortable，因此我在测试中将其切换为无组织列表然后返回draggable但仍然舔了一下颜色列表与链接。如果你愿意，我怀疑你可以回复。

<强> CSS

div.bottomdiv {
  clear: both;
  position: fixed;
  bottom: 0;
  height: 50%;
  width: 100%;
  font-size: 16px;
  text-align: center;
  overflow: auto;
}

.container {
  margin-top: 60px;
  float: left
}

.timeMilli {
  position: relative;
  display: inline-block;
}

ul.repeatable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 408px;
}

ul.repeatable li {
  width: 30px;
  height: 30px;
  float: left;
  margin: 1px 1px 1px 0;
  background-color: #ccc;
  border: 1px solid #000000;
}

b {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #ccc;
  border: 1px solid #000000;
}

.repeat {
  display: flex;
  flex-direction: nowrap;
  flex-wrap: nowrap;
}

.repeat > * {
  flex: 0 0 30px;
}

此处对ul和li进行了细微更改。

<强>的jQuery

$(function() {
  function setColor(obj, r) {
    obj.css('background-color', r);
    obj.attr("data-color", r);
  }

  function makeDrag(obj) {
    obj.draggable({
      helper: "clone",
      opacity: 0.85
    });
  }

  function makeDrop(obj) {
    obj.droppable({
      accept: ".repeatable li",
      drop: function(e, ui) {
        if (ui.helper.data("color")) {
          setColor($(this), ui.helper.data("color"));
          makeDrag($(this));
        }
      }
    });
  }

  $(document).on('click', ".repeat", function(e) {
    e.preventDefault();
    var $self = $(this);
    var $parent = $self.parent();
    var id_num = $("div[id^='repeatable']").length;
    if ($self.hasClass("add-bottom")) {
      $parent.after($parent.clone(true).attr("id", "repeatable-" + id_num));
      makeDrop($("#repeatable-" + id_num + " .repeatable li"));
      makeDrag($("#repeatable-" + id_num + " .repeatable li[data-color^='#']"));
    } else {
      $parent.before($parent.clone(true).attr("id", "repeatable-" + id_num));
      makeDrop($("#repeatable-" + id_num + " .repeatable li"));
      makeDrag($("#repeatable-" + id_num + " .repeatable li[data-color^='#']"));
    }
  });

  $(".repeatable li").on("dblclick", function(e) {
    $(this).spectrum({
      color: "#f00",
      change: function(color) {
        setColor($(this), color.toHexString());
        makeDrag($(this));
      }
    });
  });

  makeDrop($(".repeatable li"));
});

我在全球范围内看不到id_num和picker变量的需求。

由于我们将使一些事情改变颜色，可拖动和可放置，我创建了重复执行此操作的功能。

如此拖拽本身就无法实现你所需要的。您需要droppable才能在拖动项目被删除时执行操作。例如，它有一个out和over事件，您可以在它上面的框中为其添加颜色，然后在拖出后恢复颜色。

目前，我们坚持基础：我们使用Double Click事件设置颜色，然后我们可以将该颜色拖到附近的另一个框中，并且该框的颜色在删除时设置为相同的颜色。

现在，如果我们在之前或之后克隆东西，事情会变得棘手。稍后会查看它，但这应该让你现在继续前进。

如何将div拖放到另一个div上

1 个答案: