2

私はJQueryを初めて使用しますが、自分でいくつかのことを行うことができました。3 つの入力フィールドと 3 つのオプションがあります。オプションは入力フィールドにドラッグできますが、2 つのドラッグ可能なものを 1 つのドロップ可能なものにすることはできません。

ドラッグ可能なものをドロップ可能なものの上に移動しない場合、これは完全に機能します。しかし、ドロップ可能な 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

ドロップカウントをデータに保存して自分で管理する代わりに、ドロップ イベントでその 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 に答える