CODEWITHSUNDEEP
jquery
Muhammad Waqas
Muhammad Waqas

Reputation: 11

Get the value of draggable element

My code is as below:

 $(function() {
    $("#products li").draggable({
        cursor:'    move',
        opacity:    0.3,
        revert:     true,
        proxy:      'clone',
    });
    $("tr").droppable({
        drop:function(e,source){
            alert (source);
            var name = $("#products li").attr("id");
            alert (name);  
            var pid = $(this.draggable).attr("id") ;
            var add = $(this).text() ;
            var sum = pid+"-"+add;
            alert(sum);
             $.ajax({
                type:       "POST",
                url:        "add-shipment.php",
                data:       "address="+sum,
                success:    alert(sum+"has addes into database")
                });
        },
        out:function(){

        }
    });
});

The problem is the list is generated dynamically by PHP. It only gives the id of the first element.

Upvotes: 0

Views: 2546

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337743

The element which is being dragged is being passed into your function as the source variable.

Therefore, to get the values in your example, use:

var pid = source.draggable.id;
var name = source.draggable.attr("name");
var add = source.draggable.text()

Full example:

$(function() {
    $("#products li").draggable({
        cursor:'    move',
        opacity:    0.3,
        revert:     true,
        proxy:      'clone',
    });

    $("tr").droppable({
        drop: function(e, source) {
            var $el = source.draggable;

            var name = $el.attr("id");
            var pid = $el.attr("id");
            var add = $el.text();
            var sum = pid + "-" + add;

            alert(sum);

            $.ajax({
                type:       "POST",
                url:        "add-shipment.php",
                data:       "address="+sum,
                success:    alert(sum+"has addes into database")
            });
        },
        out: function(){

        }
    });
});

Upvotes: 1

Related Questions