0

好的，所以可放置的 jquery ui 东西让我有点困惑它应该如何工作。这就是我想要做的。我有 6 个 div 代表某种项目，它们需要放入 6 个可能的类别 div 中的任何一个。因此您可以将所有 6 个放入一个中，或者将 1 个放入 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 号桶里放了多少东西。

关于实现这一目标的最佳方法的任何想法？

谢谢！

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 回答