Jquery - 图像交换后的可拖动中断答案

【问题标题】：Jquery - Draggable breaks after image SwapJquery - 图像交换后的可拖动中断
【发布时间】：2011-11-10 21:36:41
【问题描述】：

我使用 Jquery 和 JqueryUI 来：

我有一个包含图像的<img>
此图像上有一个编辑按钮，允许重新定位（包装 div 溢出：隐藏），然后用户可以单击取消或保存以发送具有最终位置的 AJAX 调用，“保存相对裁剪图像”（像 facebook 个人资料图片拇指选择器一样工作）
用户还可以从中选择约 8 张图片的选项列表（类似于 twitter 从样本中更改背景）。单击时，<img> 标记中的图像与用户单击的图像交换，位置重置为 top:0px, leftpx;

这一切都很好。

但是，如果图像已经被拖动 - 那么交换后的不同图像不能被拖动。在检查元素中 - 代码使用正确的顶部和左侧坐标更新并添加正确的类 - 但图像不会移动。

如果代码有帮助 - 我可以提供。

编辑**下面的代码

id=image_slice_wrapper 具有固定尺寸的溢出隐藏。页面加载时有 src，左侧和顶部来自 DB（已保存）

<div id="image_slice_wrapper">
<img id="draggable" class="slice_img ui-draggable" style="position:relative; left:-1000px; top:-250px" src="images/ducati.jpg"/>
</div>

编辑按钮脚本以使 Div 可拖动（移除额外的样式内容）

$("#edit_button").click(function() {
$( ".slice_img" ).draggable({ disabled: false, drag: function(){                        
$(".slice_img").css("cursor","move");   
});

保存按钮以锁定 div 备份（删除 AJAX 和样式）

$("#save_button").click(function() {
$('.slice_img').draggable( "option", "disabled", true );
});

Img 替换脚本（slice_thumb 是触发交换的图像预览）

$(".slice_thumb").click(function() {
var new_image = $(this).find("img").attr("src");
$(".slice_img").attr("src",new_image);   
$(".slice_img").attr("style","left:0px; top:0px;");
});

再说一遍：如果我拖动图像。然后用另一个图像替换该图像。新图像是不可拖动的。但是我仍然可以看到顶部和左侧的样式正在更改，并且右侧的类被添加到元素中。

【问题讨论】：

代码总是有用的.. jsfiddle.net 更好。不过首先想到的是，您是否使用 live 绑定到事件？
@Todd 不确定“使用实时”是什么意思。你能澄清一下吗？
查看 jQuery 文档中的“live”方法 (api.jquery.com/live)。它用于自动将事件重新绑定到动态生成的对象。

标签： jquery jquery-ui

【解决方案1】：

解决了我的问题。仍然不清楚为什么这有效。

我将图像替换脚本更改为：

$(".slice_thumb").click(function() {
    var src = $(this).find("img").attr("src");
    $(".slice_img").attr("style","left:0px; top:0px;");
    $("#draggable").after('<img src=" " />').attr("src", src).addClass("slice_img ui-draggable").attr("style","position:relative; left:0px; top:0px").attr("id","draggable");
});

它实际上替换了 img src（就像以前一样），但还在<img src="_"> 之后创建了一个空白图像。出于某种原因，jquery 喜欢这个。新图像在代码中是可拖动的（我可以看到位置发生了变化）——并且在 DOM 中可见地可拖动。酷！

【讨论】：