Nabil Ali
Nabil Ali

Reputation: 57

jQuery draggable helper is not draggable?

I have a draggable item with a class of '.item', once i drag it to its destination it just sits there and i can't move it around, this is the code i'm using :

        $('.item').draggable({
            helper : 'clone',
            onStartDrag:function(){
                $(this).draggable('options').cursor = 'not-allowed';
                $(this).draggable('clone').css('z-index',10);
            },
            onStopDrag:function(){
                $(this).draggable('options').cursor='move';
            }
        });

        $('.cart').droppable({
            drop: function(event, ui) {
                $.ui.ddmanager.current.cancelHelperRemoval = true;
            },
            onDragEnter:function(e,source){
                $(source).draggable('options').cursor='auto';
            },
            onDragLeave:function(e,source){
                $(source).draggable('options').cursor='not-allowed';
                $.ui.ddmanager.current.cancelHelperRemoval = false;
            },
            onDrop:function(e,source){
                var name = $(source).find('p:eq(0)').html();
                var price = $(source).find('p:eq(1)').html();
                addProduct(name, parseFloat(price.split('$')[1]));
            }
        });

Upvotes: 0

Views: 311

Answers (1)

Yasemin çidem
Yasemin çidem

Reputation: 623

Revised Drop function in Dropppable method

 $(".item").draggable({
    helper:'clone',
    onStartDrag:function(){
            $(this).draggable('options').cursor = 'not-allowed';
            $(this).draggable('clone').css('z-index',10);
        },
        onStopDrag:function(){
            $(this).draggable('options').cursor='move';
        }
});  

$(".cart").droppable({
    accept: ".item",
    drop: function(event,ui){
        var new_signature = $(ui.helper).clone().removeClass('item');
        new_signature.draggable();
        $(this).append(new_signature);
    },
     onDragEnter:function(e,source){
            $(source).draggable('options').cursor='auto';
        },
        onDragLeave:function(e,source){
            $(source).draggable('options').cursor='not-allowed';
            $.ui.ddmanager.current.cancelHelperRemoval = false;
        },
        onDrop:function(e,source){
            var name = $(source).find('p:eq(0)').html();
            var price = $(source).find('p:eq(1)').html();
            addProduct(name, parseFloat(price.split('$')[1]));
        }
});

Upvotes: 2

Related Questions