在 dblclick 上启用了 Jquery droppable答案

【问题标题】：Jquery droppable enabled on dblclick在 dblclick 上启用了 Jquery droppable
【发布时间】：2016-06-21 17:59:36
【问题描述】：

下面是我的 MVC5 页面中呈现的 HTML。我需要将元素从#cardPiles 拖放到#cardDrop divs 中，这样效果很好。每个#cardDrop div 只能放入一个元素，因此drop 上的droppable = disabled 选项。

在dblclick #cardDrop divs（可拖放）返回#cardDrop（可拖动）。

droppable div 需要在dblclick 之后启用，以便它接受来自可拖动元素的任何其他元素。

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <style>
    #cardPiles {
      background: #fcc;
      border: 2px groove #fee;
      min-height: 80px;
      width: 300px;
      padding: 5px;
      float: left;
    }

    .cells div{
      background-color:#eef;
    }

    #cardDrop {
      background: #ccf;
      border: 2px groove #eef;
      width: 760px;
      padding: 5px;
      float: left;
      min-height: 80px;
      margin: 0 20px;
    }

    .cells,.draggable,.dropped  {
      float: left;
      width: 90px;
      height: 90px;
      border: 2px solid #333;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      margin: 0 0 0 0px;
      background: #fff;
    }

  </style>
</head>
<body>
  <div id="cardPiles">
      <div id="1" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Final</span><br/><span id="ref" >163289-e1</span></div>
      <div id="2" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Final</span><br/><span id="ref" >163289-e10</span></div>
      <div id="3" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Final</span><br/><span id="ref" >163289-e2</span></div>
      <div id="4" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Final</span><br/><span id="ref" >163289-e3</span></div>
      <div id="5" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Final</span><br/><span id="ref" >163289-e4</span></div>
      <div id="6" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Final</span><br/><span id="ref" >163289-e5</span></div>
      <div id="7" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Final</span><br/><span id="ref" >163289-e6</span></div>
      <div id="8" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Final</span><br/><span id="ref" >163289-e8</span></div>
      <div id="9" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Final</span><br/><span id="ref" >163289-e9</span></div>
      <div id="10" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Georgia</span><br/><span id="ref" >163294-e1</span></div>
      <div id="11" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Georgia</span><br/><span id="ref" >163294-e10</span></div>
      <div id="12" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Georgia</span><br/><span id="ref" >163294-e2</span></div>
      <div id="13" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Georgia</span><br/><span id="ref" >163294-e3</span></div>
      <div id="14" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Georgia</span><br/><span id="ref" >163294-e4</span></div>
      <div id="15" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Georgia</span><br/><span id="ref" >163294-e5</span></div>
      <div id="16" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Georgia</span><br/><span id="ref" >163294-e6</span></div>
      <div id="17" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Georgia</span><br/><span id="ref" >163294-e8</span></div>
      <div id="18" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Georgia</span><br/><span id="ref" >163294-e9</span></div>
      <div id="19" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Katrina</span><br/><span id="ref" >163297-e1</span></div>
      <div id="20" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Katrina</span><br/><span id="ref" >163297-e2</span></div>
      <div id="21" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Katrina</span><br/><span id="ref" >163297-e3</span></div>
      <div id="22" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Katrina</span><br/><span id="ref" >163297-e4</span></div>
      <div id="23" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Katrina</span><br/><span id="ref" >163297-e5</span></div>
      <div id="24" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Katrina</span><br/><span id="ref" >163297-e6</span></div>
      <div id="25" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING,  Katrina</span><br/><span id="ref" >163297-e8</span></div>
      <div id="26" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING, Katrina</span><br/><span id="ref" >163297-e10</span></div>
      <div id="27" class="draggable ui-widget-content" data-origin=""><span id="name">TESTING, Katrina</span><br/><span id="ref" >163297-e9</span></div>
  </div>
  <div id="cardDrop">
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
      <div class="cells" ></div>
  </div>
  <script>
    function rev(me) {

      console.log("DoubleClick Detected.");
      var pos = me.data("origin");
      console.log("Returning to: ", pos);
      var $o = me.clone();
      $o.draggable({
        cursor: "move",
        start: log
      });
      me.remove();
      if ($("#cardPiles div").length == 0) {
        $("#cardPiles").append($o);
        return true;
      }
      $("#cardPiles .draggable").each(function (k, v) {
        //var txt = parseInt($(v).text());
        var txt = parseInt($(v).attr("id"));
        if ($o.data("order") < txt) {
          $(v).before($o);
          return false;
        } else {
          $("#cardPiles").append($o);

        }
      });

    }

    function log(e, ui) {
      var pos = ui.offset;
      var $ob = $("#" + ui.helper.attr("id"));
      //pos.order = parseInt(ui.helper.text());
      pos.order = parseInt(ui.helper.attr("id"));
      $ob.attr("data-top", pos.top);
      $ob.attr("data-left", pos.left);
      $ob.attr("data-order", pos.order);
      $ob.attr("data-origin", [pos.top, pos.left, pos.order].join(","));
      console.log("DragStart Position: ", pos);
      console.log("Logged: " + [$ob.data("top"), $ob.data("left"), $ob.data("order")].join(","));
    }

    $(function () {
      $(".draggable").draggable({
        cursor: "move",
        start: log
      });
      $(".cells").on("dblclick", ".dropped", function () {
        console.log("Origin found: ", $(this).data("origin"), $(this).data("top"));
        rev($(this));
      });
      $(".cells").droppable({
        accept: "#cardPiles div",
        activeClass: "ui-state-highlight",
          out: function (e, ui) {
            $(this).droppable("option", "disabled", false);
          },
        drop: function (e, ui) {
          $(this).droppable("option", "disabled", true);
          var $drop = ui.draggable.clone();
          console.log("Dropped. Origin: ", $drop.data("origin"));
          $drop.removeAttr("style");
          $drop.addClass("dropped");
          $(this).append($drop);
          ui.draggable.remove();
          var c = $(".cells div").length;
        }
      }).sortable({
        revert: true
      });
    });

  </script>

</body>


</html>

【问题讨论】：

标签： jquery jquery-ui drag-and-drop draggable drag

【解决方案1】：

在dblclick 事件中，您可以使用jQuery 确定event.target 的“可丢弃”父级，然后调用droppable 方法将disabled 选项设置为false：

更新dblclick事件：

$(".cells").on("dblclick", ".dropped", function(event) {
  var droppable = $(event.target).closest('.ui-droppable');
  console.log("Origin found: ", $(this).data("origin"), $(this).data("top"));
  //Pass the "droppable" object to the rev function.
  rev($(this), droppable);
});

rev 函数的末尾：

function rev(me, droppable) {
  ...

  droppable.droppable("option", "disabled", false);
}

Updated Fiddle

【讨论】：