代码之家 › 专栏 › 技术社区 › cafc

拖动时jquery更改元素

jquery-draggable jquery

-5

cafc · 技术社区 · 10 年前

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

我真的需要这个。有人能帮我吗。提前感谢,

CAFC公司

我的代码: 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);

    }
});


});

2 回复 | 直到 10 年前

1

cafc 10 年前

解决方案是如下定制选项助手:

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

$(document).ready(function()
{


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

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

            }
        });


});

2

0

Joseph Hansen 10 年前

做类似的事情( 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);

        }
    });

});

如果这不能给你足够的自由度在拖动过程中改变元素的值,你可以使用一个点击事件并观察鼠标的移动,类似如下:

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