Question

我正在尝试使用threedubmedia的拖放选择功能，如演示here中所示。我已经找到了所有代码，但我无法弄清楚如何启用和禁用该功能。我认为这会使用bind()和unbind()，但我以前从未使用过它们，并且无法弄清楚它是如何工作的。基本上，我希望能够单击按钮启用它，而另一个按钮则禁用它。我该怎么做＆gt;

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

享受

jQuery启用和禁用拖放选择

1 个答案: