在dblclick上啓用Jquery droppable

下面是我的MVC5頁面呈現的HTML。我需要拖動#cardPiles中的元素並將它們放入#cardDropdivs，這很好。只有一個元素可以放入#cardDropdiv，因此drop上的droppable = disabled選項可以被刪除。（可拖動）返回#cardDrop（可拖動）。所述dblclick所以它接受來自可拖動的任何其它元件之後被啓用在dblclick上啓用Jquery droppable

可投放div需求。

<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>

來源

2016-03-07 user5972614

在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); 
});

在的末尾功能：

function rev(me, droppable) { 
    ... 

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

Updated Fiddle

來源

2016-03-09 20:01:12 Yass

在dblclick上啓用Jquery droppable

回答

相關問題