Question

我对JQuery很新，但我自己做了一些事情。我有三个输入字段和三个选项。选项可以拖入输入字段，但一个droppable中不能有两个可拖动。

如果您不将拖动器移动到droppables上，这将非常有效。但当你查看一个可放置的JQuery时，会执行“out”事件。我希望有一个“辍学”事件可以解决我的问题，但没有一个。

（“removeClass”功能也存在问题，因为它不起作用。但这不是一个大问题......）。

$(function() {
    var textbox; 

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

    $( ".droppable" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {

            //check if droppabele contains draggable
            if ($(this).data("containsDrop") === 0 || $(this).data("containsDrop") === undefined) { //doesn't contain
                $(this).data("containsDrop", 1);

                ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
                textbox = this;

                $( this ).addClass( "ui-state-highlight" )

            } else { //contains --> go back to options
                ui.draggable.animate({ top: 0, left: 0 }, 'slow');
            }
        },
        out: function ( event, ui ) {
            $(this).data("containsDrop", 0);
            $(textbox).removeClass( "ui-state-highlight" );
        }
    });
});

我希望有些人可以看看这个小提琴：http://jsfiddle.net/u7aJ7/10/

提前致谢。

Answer 1

我花了几个小时来制定以下解决方案。

您可以查看http://jsfiddle.net/s5057285/yx3gW/

上的工作示例

if ($("div.draggable").length > 0) {
    $("div.draggable").draggable({
        //callback 
        revert: function(droppableObj) {
            if (droppableObj === false) {
                //revert to original position
                $(this).data("draggable").originalPosition = {
                    top: 0,
                    left: 0
                };
                var textbox = $(this).data("droppable");
                $(textbox).width(74);
                $(textbox).val('');
                $(this).removeClass("dropped");

                positionDraggables();

                return true;
            } else {

                positionDraggables();

                return false;
            }
        }
    });
}

if ($("div.draggable").length > 0) {
    $("input.droppable").droppable({
        drop: function(event, ui) {
            //postition of draggable is the same as droppable
            ui.draggable.position({
                of: $(this),
                my: 'left top',
                at: 'left top'
            });
            //text from draggable in textfield
            $(this).draggable("widget").val(ui.draggable.text());
            //store the droppable in the draggable
            ui.draggable.data("droppable", this);
            ui.draggable.addClass("dropped");
            //change width and height to size of draggable
            $(this).width(ui.draggable.width());
            $(this).height(ui.draggable.height());
        }
    });
}

function positionDraggables() {
    var selects = $('body').find('div.options');
    selects.each(function(index, el) {
        var children = el.children;
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            if ($(child).hasClass("dropped")) {
                var textbox = $(child).data("droppable");
                $(child).position({
                    of: $(textbox),
                    my: 'left top',
                    at: 'left top'
                });
            }
        }
    });
}

Answer 2

不是通过将数据存储在数据中来自己维护dropcount，而是在drop事件中检查该div的内容。

drop: function( event, ui ) {
   if ( $(this).children('.draggable').length == 0 )
      ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
      var targetElem = $(this).attr("id");
      textbox = this;

      $( this ).addClass( "ui-state-highlight" );

   } else { //contains --> go back to options
      ui.draggable.animate({ top: 0, left: 0 }, 'slow');
   }
}

JQuery拖放 - droppable包含draggable

2 个答案: