1

4 つのドラッグ可能なオプションと 3 つのドロップ可能なバケットがあります。オプションをドロップ可能オブジェクトにドラッグすると、ドラッグ可能オブジェクトがバケットの値を引き継ぎます。ドロップ可能は、クラス「.dropped」も受け取ります。2 必要なもの:

  1. ドラッグ可能オブジェクトがバケットから削除されると、値が失われます
  2. ドロップ可能からすべてのドラッグ可能が削除されると、「.dropped」クラスが失われます

私が抱えている問題は、.out(event,ui) の ui パラメータが空であるため ( http://api.jqueryui.com/droppable/#event-outごとに)、実際に情報を取得できないことです。ドラッグ可能な値を更新するか、ドロップ可能内のドラッグ可能な数をカウントします。

カウンターの使用を検討しましたが、ドロップ可能なアイテムが 3 つあります。何かアドバイス？

HTML:

<div class="row-fluid">
    <div class="drag-option span1 draggable" id="option1">Option 1</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option2">Option 2</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option3">Option 3</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option4">Option 4</div>
</div>
<div class="row-fluid">
    <div class="drop-option droppable span4" value="1">1</div>
    <div class="drop-option droppable span4" value="2">2</div>
    <div class="drop-option droppable span4" value="3">3</div>
</div>

jQuery 

// Drag Drop functions
$('.draggable').draggable({containment: "#drag-radio"}).css('cursor','move');
$('.droppable').droppable({
    accept: ".drag-option",
    hoverClass: "drop-hover",
    // Make the drag option inherit the drop value
    drop: function(event,ui){
        ui.draggable.attr('value',$(this).attr('value'));
        $(this).addClass('dropped');

    },
    // Remove draggable value and droppable .dropped class
    out: function(event,ui){
        ui.draggable.attr('value','');
        $(this).removeClass('dropped');
    }
});
4

2 に答える 2

0

これを試して：\

HTML:

<div class="row-fluid">
    <div class="drag-option span1 draggable" id="option1">Option 1</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option2">Option 2</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option3">Option 3</div>
    <div class="span2"></div>
    <div class="drag-option span1 draggable" id="option4">Option 4</div>
</div>
<div class="row-fluid">
    <div class="drop-option droppable span4" data-value="1" readonly>1</div>
    <div class="drop-option droppable span4" data-value="2" readonly>2</div>
    <div class="drop-option droppable span4" data-value="3" readonly>3</div>
</div>

JS:

$('.draggable').draggable({
    containment: "#drag-radio"
}).css('cursor', 'move');
$('.droppable').droppable({
    accept: ".drag-option",
    hoverClass: "drop-hover",
    // Make the drag option inherit the drop value
    drop: function (event, ui) {
        ui.draggable.data('value', $(this).data('value'));
        alert(ui.draggable.data('value'));
        $(this).addClass('dropped');
    },
    // Remove draggable value and droppable .dropped class
    out: function (event, ui) {
        $(".draggable[data-value=" + $(this).data('value') + "]").data('value', '');
        $(this).removeClass('dropped');
    }
});

非標準の値属性の代わりにデータセット属性を使用します。次に、データセット属性に一致するセレクターを使用して、削除されたドラッグ可能なものを見つけますui。これは、それがどれであるかを示すパラメーターがないためです。

フィドル

于 2013-08-23T20:19:09.030 に答える