Question

我对jQuery不太自信，但它对于拖动和上传文件等功能非常有用。

我尝试组合一个我发现的脚本，允许我上传文件而不刷新页面（可行），我开发了自己的拖动系统（可以工作）。

我遇到的问题是，当图像上传时，我无法拖动它 - 但如果图像已经存在，我可以拖动。基本上 - 我似乎无法与另一方交谈。

上传功能如下：

$(document).ready(function(){
    ....
    $('#upload_container').html("<img class='drag-image' id='draggable' src='"+response+"'>);
dragme();
    ....
});

我最初将$('#upload_container').html作为document.getElementByID('upload_container').innerHTML，但我似乎记得会阻止jQuery获取dragme();声明（虽然似乎仍然不起作用。仍然是Firefox。声明dragme（）函数尚未被定义，即使它已存在 - 所以我相信我调用它的方式不正确。

dragme jQuery的开头如下：

$(document).ready(function dragme(){
    ....
    $("#draggable").draggable({
        drag: function(event, ui){ 
            var pos = $(this).offset();
            $("#x").val(pos.left);
            $("#y").val(pos.top);
        }
        ....
    });
    ....
});

如果这两者结合在一起还是有办法让他们通过正确的呼叫工作，它会起作用吗？

Answer 1

假设在上传文件后应执行以下代码，则为doing it wrong（抱歉，今天无法抗拒）。

$(document).ready()只应在DOM init之后调用一次。

$(document).ready(function(){
    ....
    $('#upload_container').html("<img class='drag-image' id='draggable' src='"+response+"'>);
dragme();
    ....
});

此外，您可能不希望在使用dragme()函数进行DOM初始化后定义函数。这很可能会导致您在不同浏览器中看到不需要的行为：

Firefox仍然表示dragme（）功能尚未定义虽然它在那里 - 所以我相信我的电话不正确。

上述行为很可能就是这种情况的结果。

由于您通过上传动态添加文件，因此可以执行以下操作：

$(file).uploaded(function(result) {
    var img = $('<img src="foo"/>');
    $('#upload_container').append(img).
    $(img).draggable();
});

Answer 2

听起来您希望从“加载”调用加载的图像可以拖动。

你所拥有的问题是一旦原始页面被加载就会激活“就绪”功能，但是不会覆盖它被触发后加载的任何元素。

所以无论你使用什么LOAD函数都应该有一个回调。在该回调中，您将想要调用可拖动的函数。

所以代码看起来像：

$(document).ready(function(){

    function createDrag(target)
    {
        target.draggable({
            drag: function(event, ui){ 
                var pos = $(this).offset();
                $("#x").val(pos.left);
                $("#y").val(pos.top);
            }
        });
    }

    createDrag($("#draggable"));

    $('#loader').load('url', function(){ createDrag($("#draggable")); });

});

jQuery - 让两个函数相互协作

2 个答案: