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

Question

我有 2 个 Twitter Bootstrap 元素列表：

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

两个表格之间还有一个区别："shopping cart list" 上的条目有一个徽章（表示每个项目的数量）和一个删除按钮。

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();
});

问题是初始项目确实有徽章和删除按钮，但是从 "shop list" 拖动的项目存储在另一个没有徽章或删除按钮的列表中。

我做了一个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 列表之间移动元素

Moving elements between Twitter Bootstrap lists with different entry stile

html

javascript

jquery

twitter-bootstrap