0

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

4

1 回答 1

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

请享用

于 2013-05-21T03:05:19.220 回答