Question

我有2个Twitter Bootstrap元素列表：

一个是可以拖动到第二个列表的可用元素列表（就像商店一样）
另一个列表存储第一个列表中的元素副本（如购物车）

两个表之间还有一个区别：＆＃34;购物车列表中的条目＆＃34;有徽章（表示每件商品的数量）和删除按钮。

HTML：

<div class="panel panel-primary">
    <div class="panel-heading">list1 (cart)</div>
    <div class="panel-body">
        <ul id="list1" class="list-group">
            <li id="item1" href="#" class="list-group-item">Item1 <span id="badge" class="badge">5</span>
 <i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>

            </li>
            <li id="item2" href="#" class="list-group-item">Item2 <span id="badge" class="badge">-3</span>
 <i class="fa fa-remove fa-2x pull-right" style="color: red;"></i>

            </li>
        </ul>
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">list2 (shop)</div>
    <div class="panel-body">
        <ul id="list2" class="list-group">
            <li href="#" class="list-group-item">Item1</li>
            <li href="#" class="list-group-item">Item2</li>
            <li href="#" class="list-group-item">Item3</li>
        </ul>
    </div>
</div>

JS：

// Create list of instances
var list1_element = document.getElementById("list1");
var list1 = new Sortable(list1_element, {
    group: {
        name: "my_group",
        pull: true,
        put: true
    },

    // Called by any change to the list (add / update / remove)
    onSort: function (event) {
        console.log('Change performed to list1');
    },
});

// Create list 2
var list2_element = document.getElementById("list2");
var list2 = new Sortable(list2_element, {
    group: {
        name: "my_group",
        pull: 'clone',
        put: false
    },
    sort: false
});

// Configure click action over the badges
jQuery(".badge").click(function () {
    console.log('Clicked badge');
});

// Configure click action over the remove buttons
jQuery(".icon-remove").click(function () {
    console.log('Clicked remove button');
    $(this).closest("li").remove();
});

问题是初始项目确实有徽章和删除按钮，但是商品列表＆＃34;存储在另一个列表中，没有徽章或删除按钮。

我制作了JSFiddle来显示当前状态。

有关如何修复的想法吗？

奖励：我还在想弄清楚如何让徽章右侧出现删除图标并更好地居中高度。有什么想法？

Answer 1

您需要更新使用自定义HTML拖动的元素，以显示徽章和删除图标。

已更新

创建新的i元素后，需要为其绑定click（）。我已更新了FIDDLE。

  ...
  onSort: function (event) {
    ///add the badge
    var span = document.createElement("span");
    span.innerHTML = span.innerHTML +"1";
    span.className = span.className + " badge";
    event.item.appendChild(span);

    ///add remove icon
    var i = document.createElement("i");
    i.style.color='red';
    i.className = i.className + " fa fa-remove fa-2x pull-right";
    event.item.appendChild(i);

    //bind the new icon element
    jQuery(i).click(function () {
            console.log('Clicked the new remove button');
            $(this).closest("li").remove();
     });

    //in event you have a lot of information see it in the console
    console.log(event);
  }
  ...

在Twitter Bootstrap列表之间移动元素，具有不同的条目窗口

1 个答案: