jquery droppable分类

Question

好的，所以droppable jquery ui对我来说有点混乱它应该如何工作。这是我想要做的。我有6个div代表某种项目，他们需要被分成6个可能的类别div中的任何一个。所以你可以将所有6个放入一个，或者将6个放入6中，等等。

这里是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中有多少东西。

有关实现此目标的最佳方法的任何想法吗？

谢谢！

Answer 1

如果将droppable 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); 
    }
});

Fiddle here

修改

根据您的评论，您需要更多的灵活性，在存储桶之间移动，动态跟踪拖放的位置等等。

使用可排序和可拖动的方式然后更有意义。

如果你有这样的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();
});

Another fiddle here