Get HTML5 custom data attributes from dragged element

Question

I have two lists: one just for getting elements (store list) and drag them into the other list (shopping cart).

The shopping cart list stores one elemenet of each type dropped there, and if more than one elemenet of the same type is dragged there, I want the Twitter Bootstrap badge to be incremented, and avoid a new duplicate entry to be stored.

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');
                }
            });
        },
    });

It is not working, and the problem according to Firebug is the read of the HTML5 custom data field data-type . I need to compare this data-type field to those already at the list to detect duplicates (this is a small executable example of a bigger application, where I need to compare more than one custom data field, so comparing the text of the list entry is not enough for me; it has to be the custom data field).

As you can see, I'm trying to read the dropped item getting if from the onAdd function event (and according to FireBug , the item contained into event is the dropped item with its custom data field, so this has to be ok), and I'm trying to retrieve the data field with .data() . I have read that .data() does create a copy of the value, so it is a better idea to use .attr() when modifing the value, but this example is quite dummy and does not require to modify the custom data field, so it should be enough.

Here is my JsFiddle . Any idea what's wrong?

Answer 1

我找到了答案：我正在使用Jquery，应该使用普通的JavaScript：

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