jQuery启用和禁用拖放选择

Question

我试图使用threedubmedia的拖放选择功能，如演示here中所示。我已经弄清了所有的代码，但我无法弄清楚如何启用和禁用这些功能。我认为这用途bind()和unbind()，但我从未使用过这些之前无法弄清楚它是如何工作的。基本上，我希望能够点击一个按钮来启用它，另一个来禁用它。如何做到这一点>

Answer 1

here is a fiddle of that example demo copied and working with added unbind and re-bind functionality.

在这种特殊情况下.unbind() should be called on the element you wish to remove bindings from,的的$（document）元素是我们的目标。没有任何参数.unbind（）将从该元素中移除所有绑定，但您也可以将特定的事件参数传递给它以删除它们。

我在上面摆弄所做的是在解除绑定按钮添加一个点击功能删除绑定的文档元素和重新绑定按钮重新连接他们第二次点击功能。香港专业教育学院增加了一些基本的HTML和CSS与额外的jQuery一起去执行解除绑定/重新绑定

HTML

<div class="unbind">UNBIND the drag drop Document Handlers</div> 
<div class="rebind">RE-BIND</div> 

CSS

.unbind{ 
    display:block; 
    padding:10px 30px; 
    background: red; 
    cursor:pointer; 
    position:absolute; 
    bottom: 100px; 
    color: white; 
    font-family: Arial; 
    font-size:25px; 
} 

.rebind{ 
    display:block; 
    padding:10px 30px; 
    background: green; 
    cursor:pointer; 
    position:absolute; 
    bottom: 10px; 
    color: white; 
    font-family: Arial; 
    font-size:25px; 
} 

JS

$('.unbind').click(function(){ 
    alert("unbound"); 
    $(document).unbind(); 
}); 
$('.rebind').click(function(){ 
    alert("rebound"); 
     $(document) 
     .drag("start",function(ev, dd){ 
      return $('<div class="selection" />') 
       .css('opacity', .65) 
       .appendTo(document.body); 
     }) 
     .drag(function(ev, dd){ 
      $(dd.proxy).css({ 
       top: Math.min(ev.pageY, dd.startY), 
       left: Math.min(ev.pageX, dd.startX), 
       height: Math.abs(ev.pageY - dd.startY), 
       width: Math.abs(ev.pageX - dd.startX) 
      }); 
     }) 
     .drag("end",function(ev, dd){ 
      $(dd.proxy).remove(); 
     }); 
});  

享受