Question

我需要在拖动时更改拖动元素。在这种情况下，我需要将单词“HELLO”更改为“HI”，但如果用户没有执行删除，则元素应该返回到原始状态“HELLO”。 http://i.stack.imgur.com/QNBLD.png

我真的需要这个。任何人都可以帮助我。提前谢谢，

CAFC

$(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);

    }
});


});

Answer 1

解决方案是自定义选项助手：

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

$(document).ready(function()
{


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

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

            }
        });


});

Answer 2

做这样的事情（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);

        }
    });

});

如果在拖动过程中没有足够的自由来更改元素的值，您可以使用on click事件并观察鼠标移动，类似于：

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

拖动时jquery更改元素

2 个答案: