2

我对 JQuery 很陌生，但我设法自己做了一些事情。我有一个三个输入字段和三个选项。选项可以拖到输入字段中，但不能将两个可拖动项放入一个可放置项中。

如果您不将可拖动对象移动到可放置对象上，这将非常有效。但是，当您查看可放置的 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/

提前致谢。

4

2 回答 2

4

我花了几个小时在上面并制定了以下解决方案。

您可以在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'
                });
            }
        }
    });
}​
于 2012-05-11T18:15:32.350 回答
0

与其通过将 dropcount 存储在数据中来自己维护 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');
   }
}
于 2012-04-20T21:04:53.800 回答