Jquery UI,Draggable / Droppable在Json之后附加克隆

时间:2012-08-07 03:46:31

标签: jquery json jquery-ui draggable droppable

我一直在玩这行代码试图让它正常运行而没有成功决定发布在这里,希望有人可以提供帮助。

我的问题围绕着使用DRAGGABLE / DROPPABLE和Json的JQUERY UI。这是我的代码:

$('.drag').draggable({
        helper: 'clone'
    });
    $(".drop").droppable({
        drop: function(e, ui) {
            var dataString = 'type='+ui.draggable.clone().find('.type').attr('id')+'&update=update';
            $.ajax({
                url: 'phphandler.php',
                type: 'POST',
                data: dataString,
                dataType: 'json',
                success: function(json) {
                    $(this).append(ui.draggable.clone().html(json.Data));
                },
                error: function() {
                    alert(ui.draggable.clone().html);
                }
            });
        }
});

我的HTML基本上是:

<div class="drag">Object</div>
<div class="drop"></div>

我想要做的就是在成功之后将克隆添加到删除,或者在成功之后更改克隆的html。

注意:我可以在Ajax请求之前添加,但没有问题但是在成功后无法更改克隆的HTML。

1 个答案:

答案 0 :(得分:0)

小心功能的范围

尝试

$.ajax({
                url: 'phphandler.php',
                type: 'POST',
                data: dataString,
                dataType: 'json',
                context: this,
                success: function(json) {
                    $(this).append(ui.draggable.clone().html(json.Data));
                },
                error: function() {
                    alert(ui.draggable.clone().html);
                }
            });

OR

var dataString = 'type='+ui.draggable.clone().find('.type').attr('id')+'&update=update';
           var tmp = $(this);
           $.ajax({
                url: 'phphandler.php',
                type: 'POST',
                data: dataString,
                dataType: 'json',
                success: function(json) {
                    tmp.append(ui.draggable.clone().html(json.Data));
                },
                error: function() {
                    alert(ui.draggable.clone().html);
                }
            });