0

わかりましたので、ドロップ可能なjquery uiのことは、どのように機能するはずなのか、私には少し混乱しています。これが私がやろうとしていることです。ある種のアイテムを表す 6 つの div がありますが、それらは 6 つのカテゴリ div のいずれかにドロップする必要があります。そのため、6 つすべてを 1 つにまとめたり、6 つそれぞれに 1 つ入れたりすることができます。

ここにhtmlがあります： 

    <div class='droppable_category'>
      name
    </div>
    <div class='droppable_category'>
      name
    </div>
    <div class='droppable_category'>
      name
    </div>
    <div class='droppable_category'>
      name
    </div>
    <div class='droppable_category'>
      name
    </div>
    <div class='droppable_category'>
      name
    </div>
  </div>



<br class='clear'>
<div id='column_1_count' class='droppable_bucket'>
</div>
<div id='column_2_count' class='droppable_bucket'>
</div>  
<div id='column_3_count' class='droppable_bucket'>
</div>
<div id='column_4_count' class='droppable_bucket'>
</div>
<div id='column_5_count' class='droppable_bucket'>
</div>
<div id='column_6_count' class='droppable_bucket'>
</div>

ここにJavaScriptがあります：

$( ".droppable_category" ).draggable({ revert: "invalid" });

$( ".droppable_bucket" ).droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped!" );
    }
});

基本的に、次のような隠しフィールドを更新する必要があります

<input type="hidden" value="0" id="cat1">

ドロップ可能なバケットにドロップされたアイテムの総数に。

最終的に、バケツ 1 ～ 6 にいくつのものが入れられたかがわかります。

これを達成するための最良の方法について何か考えはありますか?

ありがとう！

4

1 に答える 1

0

次のように、ドロップ可能な div を入力にリンクすると、作業が少し楽になります。

<div id='column_1_count' class='droppable_bucket' data-input='cat1'>
</div>
<div id='column_2_count' class='droppable_bucket' data-input='cat2'>
</div>  
<div id='column_3_count' class='droppable_bucket' data-input='cat3'>
</div>
<div id='column_4_count' class='droppable_bucket' data-input='cat4'>
</div>
<div id='column_5_count' class='droppable_bucket' data-input='cat5'>
</div>
<div id='column_6_count' class='droppable_bucket' data-input='cat6'>
</div>

次に、次のようなことができます。

$( ".droppable_category" ).draggable({ revert: "invalid" });

$( ".droppable_bucket" ).droppable({
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    drop: function( event, ui ) {
        var currentHeight = $(this).height();
        var relatedInput = $(this).data('input');
        var catCount = parseInt($("#"+relatedInput).val(), 10);
        $( this )
            .addClass( "ui-state-highlight" )
            .height(currentHeight+25);
        $("#"+relatedInput).val(++catCount); 
    }
});

ここでフィドル。

編集

あなたのコメントに基づいて、バケット間で物を移動したり、物がドラッグアンドドロップされた場所を動的に追跡したりするなど、より多くの柔軟性が必要です。

sortable と draggable を一緒に使用すると、より理にかなっています。

次のような HTML がある場合:

<div id="fixedDiv">
    <ul id="category">
        <li class="droppable_category">name</li>
        <li class="droppable_category">name</li>
        <li class="droppable_category">name</li>
        <li class="droppable_category">name</li>
        <li class="droppable_category">name</li>
        <li class="droppable_category">name</li>
    </ul>
</div>
<div id="buckets">
    <ul id='column_1_count' class='droppable_bucket' data-input='cat1'></ul>
    <ul id='column_2_count' class='droppable_bucket' data-input='cat2'></ul>
    <ul id='column_3_count' class='droppable_bucket' data-input='cat3'></ul>
    <ul id='column_4_count' class='droppable_bucket' data-input='cat4'></ul>
    <ul id='column_5_count' class='droppable_bucket' data-input='cat5'></ul>
    <ul id='column_6_count' class='droppable_bucket' data-input='cat6'></ul>
    <ul id='column_7_count' class='droppable_bucket' data-input='cat7'></ul>
</div>

次のように JavaScript を作成できます。

$(function() {
    var transferred = false;
    $('.droppable_category').draggable({
        connectToSortable: '.droppable_bucket',
        helper: 'clone',
        start: function(event, ui)
        {
            $(this).hide();
        },
        stop: function(event, ui)
        {
            if(!transferred)
                $(this).show();
            else
            {
                $(this).remove();
                transferred = false;
            }
        }
    });

    $('.droppable_bucket').sortable({
        connectWith: ".droppable_category, .droppable_bucket",
        receive: function(event, ui)
        {
            transferred = true;
            var targetInput = $(this).data('input');
            var targetCatCount = parseInt($("#"+targetInput).val(), 10);
            $("#"+targetInput).val(++targetCatCount); 
            if (ui.sender.hasClass("droppable_bucket")) {
                var sourceInput = ui.sender.data('input');
                var sourceCatCount = parseInt($("#"+sourceInput).val(), 10);
                $("#"+sourceInput).val(--sourceCatCount);                 
            }           
        }
    });
    
    $( "ul, li" ).disableSelection();
});

ここで別のフィドル。

于 2013-02-23T23:25:24.480 に答える