從拖動的元素獲取HTML5自定義數據屬性

我有兩個列表：一個用於獲取元素（商店列表）並將它們拖到另一個列表（購物車）中。從拖動的元素獲取HTML5自定義數據屬性

購物車列表中存儲了每種類型的一個elemenet，並且如果同一類型的多個elemenet被拖動到那裏，我希望Twitter Bootstrap徽章增加，並避免存儲新的重複條目。

HTML：

<div class="panel panel-primary"> 
    <div class="panel-heading">Fruit store</div> 
    <div class="panel-body"> 
     <ul id="fruit-list" class="list-group"> 
      <li href="#" class="list-group-item" data-type="apple">Apple</li> 
      <li href="#" class="list-group-item" data-type="pear">Pear</li> 
      <li href="#" class="list-group-item" data-type="banana">Banana</li> 
      <li href="#" class="list-group-item" data-type="watermellon">Watermellon</li> 
     </ul> 
    </div> 
</div> 
<div class="panel panel-primary"> 
    <div class="panel-heading">Shopping cart</div> 
    <div class="panel-body"> 
     <ul id="cart-list" class="list-group"> 
      <li href="#" class="list-group-item" data-type="banana">Banana 
       <div class="pull-right"> 
        <span id="badge" class="badge">5</span> 
       </div> 
      </li> 
      <li href="#" class="list-group-item" data-type="pear">Pear 
       <div class="pull-right"> 
        <span id="badge" class="badge">2</span> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div>

JS：

// Create fruit store list 
var list_element = document.getElementById("fruit-list"); 
var fruit_list = new Sortable(list_element, { 
    group: { 
     name: "fruit_group", 
     pull: 'clone', 
     put: false 
    }, 
    sort: false, 
    ghostClass: "droppable-area", 
}); 

// Create shopping cart list 

    var cart_list_element = document.getElementById("cart-list"); 
    var cart_list = new Sortable(cart_list_element, { 
     group: { 
      name: "fruit_group", 
      pull: true, 
      put: true 
     }, 
     // Element is dropped into the list from another list 
     onAdd: function (event) { 
      console.log(event.item) 
      // First check if there is an equal fruit at the list already. In that case, increment badge number 
      var draggedElement = event.item; 
      var type = draggedElement.data('type'); 

      // Iterate existing elements 
      $("#cart-list li").each(function() { 
       var existingType = $(this).data('type'); 

       if (existingType == type){ 
        var numberOfFruits = event.item.closest('span').innerHTML; 
        console.log(numberOfFruits + ' ' + type + ' already at the list, updating badges'); 
        // Increment number of this fruit 
        (event.item.closest('span').innerHTML)++; 
        return false; //break statement 
       } else { 
        console.log('New fruit inserted to cart list'); 
       } 
      }); 
     }, 
    });

它不能正常工作，並根據Firebug的問題是HTML5自定義數據字段data-type的讀取。我需要將此data-type字段與列表中已有的字段進行比較以檢測重複項（這是較大應用程序的一個小可執行示例，我需要比較多個自定義數據字段，因此比較列表項的文本不是對我來說足夠了;它必須是自定義數據字段）。

正如你所看到的，我試圖從onAdd函數事件中讀取被丟棄的項目（並且根據FireBug，事件中包含的項目是具有其自定義數據字段的丟棄項目，所以這必須確定），並且我試圖用.data()檢索數據字段。我讀過.data()確實創建了一個值的副本，所以在修改值時使用.attr()更好，但這個例子是相當虛設的，不需要修改自定義數據字段，所以它應該足夠了。

Here is my JsFiddle。任何想法有什麼不對？

來源

2015-01-15 Roman Rdgz

我找到了答案：我用一個jQuery我應該使用一直普通的JavaScript：

var type = event.item.getAttribute("data-type");

來源

2015-01-16 08:52:40

從拖動的元素獲取HTML5自定義數據屬性

回答

相關問題