Javascript jQuery启用和禁用拖放选择

我正在尝试使用threedubmedia的拖放选择功能，如演示中所示。我已经弄明白了所有这些代码，但我不知道如何启用和禁用这些功能。我假设它使用了

bind（）

和

unbind（）

，但我以前从未使用过它们，也不知道它是如何工作的。基本上，我希望能够单击一个按钮来启用它，另一个按钮来禁用它。我该怎么做？

在本例中，$（document）元素是我们的目标。unbind（）将从该元素中删除所有绑定，但您也可以向其传递特定的事件参数以仅删除这些绑定

在上面的fiddle中，我所做的是在unbind按钮上添加一个click函数来删除document元素的绑定，并为rebind按钮添加第二个click函数来重新附加它们。我添加了一些基本的html和css，并使用额外的jquery来执行解除绑定/重新绑定

HTML

JS

$（'.unbind'）。单击（函数（）{
警报（“未绑定”）；
$（文档）.unbind（）；
});
$（'.rebind'）。单击（函数（）{
警惕（“反弹”）；
$（文件）
.拖动（“启动”，功能（ev，dd）{
返回$（''）
.css（'opacity'，.65）
.附录（文件正文）；
})
.阻力（功能（ev、dd）{
$（dd.proxy）.css({
顶部：Math.min（ev.pageY，dd.startY），
左：数学最小值（ev.pageX，dd.startX），
身高：数学绝对值（ev.pageY-dd.startY），
宽度：Math.abs（ev.pageX-dd.startX）
});
})
.拖动（“结束”，功能（ev，dd）{
$（dd.proxy）.remove（）；
});
});    

---

享受

谢谢，这正是我需要的。

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

.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;
}

$('.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();
        });
});