jquery change element while dragging

Question

i need to change the drag element while been dragging. in this case, i need to change the word "HELLO" to "HI" but if the user does not perform a drop, the element should be back to the original state, "HELLO". https://i.stack.imgur.com/QNBLD.png

I really need this. can any one help me please. Thanks in advance,

CAFC

my code: DEMO JSFIDDLE

$(document).ready(function()
{

var td1 = $("#A");
var td2 = $("#B");

td1.draggable({
    cursor: "move",
    appendTo: "body",
    helper: "clone",
    opacity: "0.5",
    revert: "invalid"

});

td2.droppable({
    accept: 'div',  
    drop: function (event, ui) {

        var x = $(ui.draggable).html();

        $(this).html(x);

    }
});


});

Please post the code in your question. Don't go around the rules by putting in fake code tags in order to link to JSFiddle. — James Donnelly, Aug 13 '14 at 16:00
http://jqueryui.com/draggable/#events You have a start and stop event available. — MrUpsidown, Aug 13 '14 at 16:14
i now the draging events. but still i can't see a way to change de value on fly of the dragging element. that's the pb! the events work nice and change de element but not on the fly, do u understand what i mean or need? thanks — cafc, Aug 13 '14 at 16:31

score 1 · Accepted Answer · answered Aug 13 '14 at 21:36

the solution is to customize the option helper like this:

<div id='A' class='x'>HELLO</div>

$(document).ready(function()
{


 $("#A").draggable({
            revert: "invalid",
            helper: function(){

                 return "<div id='A' class='x'>X</div>";

            }
        });


});

Joseph Hansen · Answer 2 · 2014-08-13T16:42:14.647

Do something like this (jsfiddle):

$(document).ready(function()
{

    $('#A').draggable({
        cursor: "move",
        appendTo: "body",
        helper: "clone",
        opacity: "0.5",
        revert: false,
        start: function(event, ui) {

            ui.helper.data('dropped', false);
            $('#A').text('hi');

        },
        stop: function(event, ui) {

            if (!ui.helper.data('dropped'))
                $('#A').text('HELLO');

        }

    });

    $('#B').droppable({
        accept: 'div',  
        drop: function (event, ui) {

            ui.helper.data('dropped', true);

            var x = $(ui.draggable).html();

            $(this).html(x);

        }
    });

});

If that doesn't give you enough freedom changing the value of the element during drag, you could use an on click event and watch for mouse movement, similar to this:

$('#A').mousedown(function() {
    $(window).mousemove(function() {
        $('#A').text('hi');
        $(window).unbind('mousemove');
    });
});

jquery change element while dragging

2 Answers2