Question

我使用Jquery和JqueryUI：

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

这一切都运作良好。

但是如果图像已被拖动 - 则无法拖动交换后的其他图像。在inspect元素中 - 代码使用正确的顶部和左侧坐标进行更新，并添加正确的类 - 但图像不会移动。

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

编辑**代码

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 Draggable（删除额外样式内容）

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

保存按钮以锁定div备份（AJAX＆amp;样式已删除）

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

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

Answer 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中可见拖动。酷！

Jquery - 可拖动在图像交换后中断

1 个答案: