图像上可拖动/可调整大小的图像答案

【问题标题】：Draggable/resizable image on image图像上可拖动/可调整大小的图像
【发布时间】：2014-08-14 12:27:26
【问题描述】：

我想在另一个图像前面制作可调整大小的 Draggalbe 图像，当我尝试使其可调整大小时，它破坏了所有 CSS 蚂蚁，它不在第一个图像前面。 JSFiddler Demo

 $(document).ready(function() {

    $(".el").click(function() {

        $("#bg").before(function() {
            return $(".el").clone().toggleClass('res').draggable({
              containment: "#bg"
            });
        });

        });
        $("#bg").droppable({
          drop: function( event, ui ) {
             x = ui.helper.clone();

          }
        });

});

【问题讨论】：

标签： jquery draggable resizable

【解决方案1】：

首先，您正在克隆 ALL .el，因此您将在第一次点击时获得 1，然后在第二次点击时获得 2，然后是 4、8、16 等。其次，您将克隆的元素放置在 before #bg 而不是在里面。

使用.append 代替.before，并且仅克隆.el 的实例，该实例位于#elements 中。例如：

$("#bg").append(function() {
    return $("#elements .el").clone().addClass('res').draggable({
      containment: "#bg"
    });
});

见：http://jsfiddle.net/72b1tLpv/1/

更新：

出于某种原因我只能append() 一个实例，但我会prepend() 任意次数。（将$("#bg").append(function(){ 切换为$("#bg").prepend(function(){ 自己看看。）

如果这对您来说是个问题，您可以在第一张图片之后附加它。即：

$("#bg img:first").after(function() {

(http://jsfiddle.net/72b1tLpv/2/)

【讨论】：

谢谢，调整大小怎么样？