移動元件具有不同的進入豎框

Question

我有元件2名Twitter的引導列表：

• 一個是可用的元素的列表，其可以被拖動到所述第二列表（其像店）
• 從第一列表元素（如購物車）

有兩個表之間的附加差異的其他列表存儲副本：「購物車清單」上的條目有一個徽章（以指示量每個項目）和一個刪除按鈕。

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

的問題是，最初的項目確實有徽章和刪除按鈕，但是從「店鋪列表」拖項目被存儲在其他沒有徽章或刪除按鈕的列表。

我做了一個JSFiddle顯示當前狀態。

任何想法如何解決它？

獎勵：我仍在找出如何讓刪除圖標出現在徽章的右側，並且更好地居中。任何想法？

Answer 1

您需要更新您用自定義HTML拖動的元素，以顯示徽章和刪除圖標。

修訂

您創建的新i個元素之後，你需要綁定的點擊（）它。 我已更新我的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); 
    } 
    ...