Droppable jQuery event does not work

Question

Droppable jQuery event does not work

Asked 10 years, 3 months ago

Viewed 296 times

0

I have the following code to perform the Drag and Drop event:

$(".device-profiles").draggable({
    revert : true,
    start: function(event, ui) {
        dragColor = $(this).attr("data-color");
        console.log("dragColor: " + $(this).attr("data-color"));
    } 
});

$(".mediaplayer-profiles").droppable({
    drop: function (event, ui){
        $(this).removeClass($(this).attr("data-color"));
        $(this).attr("data-color", ui.draggable.attr("data-color"));
        $(this).addClass($(this).attr("data-color"));
    }
});

The first time I run the drop, the same works, but when I try to change to other places the effect no longer works.

What may be causing this failure?

Gumaro, I tested your code in Jsfiddle, but with an older version of jQuery and jQuery UI. No error. Take a look at the Browser console and see there is no error message. In case, the use of the property revert in the draggable will always block the drop, causing the element to return to the initial position of the draggable. If you can include a little marking to help contextualize or create a mcve in the jsfiddle.

– Wakim

2014/09/05 at 20:55
@Would Wakim have been able to show me this version of jsfiddle you tested? here always occurs the same error.

– gumaro

2014/09/09 at 14:45
I used this file (http://jsfiddle.net/Morals/YnWc2/8/) as the base. It has the original code, I changed it to put yours and it worked.

– Wakim

2014/09/09 at 14:46
@Wakim in my case I need him to return to his current position. I’m also using various draggable elements which will make the color exchange, similar to Jader’s suggestion.

– gumaro

2014/09/09 at 14:49

1 answer

Browser other questions tagged javascript jquery drag-n-drop

You are not signed in. Login or sign up in order to post.

by Jader A. Wagner • **4,921** points · Answer 1 · 2014-09-06T13:52:25+00:00

You are using the attribute data wrong way, although it works that way, there is a specific method .data() which is easier and cleaner to use.

And to use a variable between different functions, you must declare it in the global scope first.

Follows example working:

jquery

var dragColor; // declarar a variavel no escopo global

$(".device-profiles").each(function () {
    $(this).addClass($(this).data('color')); // *opcional* colocar o data-color como class em cada elemento
}).draggable({
    revert: true,
    start: function (event, ui) {
        dragColor = $(this).data('color');
        console.log("dragColor: " + dragColor);
    }
});

$(".mediaplayer-profiles").droppable({
    drop: function (event, ui) {
        $(this).removeClass($(this).data('color')).data('color', dragColor).addClass(dragColor);
    }
});

HTML

<div id="draggable">
    <p class="device-profiles" data-color="teste1">Drag me to my target</p>
    <p class="device-profiles" data-color="teste2">Drag me to my target</p>
    <p class="device-profiles" data-color="teste3">Drag me to my target</p>
</div>
<div id="droppable" class="mediaplayer-profiles">
    <p>Drop here</p>
</div>

Jsfiddle