jQuery 启用和禁用拖放选择

Question

我试图使用threedubmedia的拖放选择能力如图所示的演示这里。 我已经弄清楚了所有代码，但我无法弄清楚如何启用和禁用该功能。 我假设这使用了bind()和unbind() ，但我以前从未使用过它们并且无法弄清楚它是如何工作的。 基本上，我希望能够单击一个按钮来启用它，另一个按钮来禁用它。 我该怎么做呢？

Answer 1

这是复制并使用添加的解除绑定和重新绑定功能的示例演示的小提琴。

.unbind() 应该在您希望从中删除绑定的元素上调用，在这种特殊情况下，$(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();
        });
});    

请享用