Question

作为学生的活动，我有一组需要与一组droppable匹配的可拖动项。下面的代码都可以正常工作（例如，它允许学生更改选择），但它也允许学生在一个droppable上放置两个可拖动的代码。

    $('.drags').draggable({containment:'#container',
                          revert:function (event, ui) {   
                           $(this).data("draggable").originalPosition 
                                   = {top: 0,left: 0 }; return !event;}});

    $('.drops').droppable({accept:'.drags',
                           drop:function(event, ui){  
                                  ui.draggable.position( { of: $(this), 
                                                           my: 'left top', 
                                                           at: 'left top'} );},});

如果我禁用droppable，请在'drop'函数中包含以下代码

    $(this).droppable({ disabled: true });

然后draggable也被禁用，我不想要。

有没有办法将droppable限制为只接受一个draggable，但仍然保持拖动？

由于

解决方案：

我最终得到了一个解决方案，它基本上涉及在拖动拖放时摧毁droppable，并且当拖动它的拖拽移动时再次使该元素可以删除。下面是代码，有点简洁，但如果有人在寻找解决方案，它可能会有所帮助。

干杯

      $('.drags').draggable({
            containment:'#container',
            revert:function (event, ui) {
                  $(this).data("draggable").originalPosition = {top: 0,left: 0 }; 
                           return !event;},
            start:function(event, ui){ var thisId = this.id; 
                                var dropId = null; 
                                var a = $('#container').data('state');
                                $.each(a,function(key,value){
                                     if(value==thisId){dropId = key; 
                                            a[key]='x'; 
                                            dropId = '#'+dropId;
                                            $(dropId).droppable({
                                              accept:'.c1yx',
                                              drop:function(event, ui){ 
                                               var droppedId = ui.draggable.attr('id');
                                               ui.draggable.position( { of: $(this), my: 'left top', at: 'left top'} );
                                               var thisId = this.id; 
                                               var a = $('#c1yw').data('state');
                                                $.each(a,function(key,value){if(key==thisId){a[key] =droppedId}}); 
                                                $(this).droppable( 'destroy')}});}})}});

//设置每个droppables的状态

$('#c1yw').data('state'{c1y9:'x',c1yc:'x',c1yf:'x',c1yi:'x',c1yl:'x',c1yo:'x',c1yr:'x',c1yu:'x'});

$('#c1y9,#c1yc,#c1yf,#c1yi,#c1yl,#c1yo,#c1yr,#c1yu').droppable({
    accept: '.drags',
    drop: function (event, ui) {
        var droppedId = ui.draggable.attr('id');
        ui.draggable.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        });
        var thisId = this.id;
        var a = $('#c1yw').data('state');
        $.each(a, function (key, value) {
            if (key == thisId) {
                a[key] = droppedId
            }
        });
        $(this).droppable('destroy')
    } });

Jquery禁用droppable但启用了draggable

0 个答案: