你如何调整克隆的jQuery UI元素（图片）

我有一些特殊的需要克隆一个元素（图像），并在容器内拖动，并保持其可拖动（但不克隆）一次。你如何调整克隆的jQuery UI元素（图片）

我只想让容器中的拖动的克隆元素也可以重新定义大小，但是我无法让它工作。

我只能得到父元素调整大小。有没有什么办法可以.resize克隆的元素？

有点靠不住的，但工作示例：http://jsfiddle.net/rGUma/4/

代码：

<div class="drag"><img src="..." /></div> 
<div class="drag"><img src="..." /></div> 
<div class="drag"><img src="..." /></div> 
<div class="drop-zone"></div> 


    <script> 
    $(".drop-zone").droppable({ 
     accept: '.drag', 
     drop: function(event, ui) { 
      var $clone = ui.helper.clone(); 
      if (!$clone.is('.inside-drop-zone')) { 
       $(this).append($clone.addClass('inside-drop-zone').draggable({ 
        containment: '.drop-zone' 
       })); 
      } 
     } 
    }); 
    $(".drag").draggable({ 
     helper: 'clone' 
    }); 

    //this works but I dont want it on outside elements 
    $('.drag').resizable({ 
     helper: "ui-resizable-helper" 
    }); 

    //this doesn't work on cloned images but what I want working  
    $('.drop-zone img').resizable({ 
     helper: "ui-resizable-helper" 
    });   

    // '.inside-drop-zone img' also doesnt work 

}); 

</script>

PS。如果有人可以解释为什么它不起作用，将不胜感激。

来源

2012-03-22 Wyck

它不起作用，因为克隆从未设置为可调整大小。 .resizable仅适用于开始时存在的元素，而不适用于您创建的任何新元素。

我将可调整大小的调用移入克隆部分以将其应用于克隆。这也意味着，外箱不能调整大小，按您的意见诠释源（updated jsfiddle）：

$(document).ready(function($) { 

    $(".drop-zone").droppable({ 
     accept: '.drag', 
     drop: function(event, ui) { 
      var $clone = ui.helper.clone(); 
      if (!$clone.is('.inside-drop-zone')) { 
       $(this).append($clone.addClass('inside-drop-zone').draggable({ 
        containment: '.drop-zone' 
       })); 

       $clone.resizable({ //this works but I dont want it to on outside elements 
        helper: "ui-resizable-helper" 
       }); 
      } 
     } 
    }); 
    $(".drag").draggable({ 
     helper: 'clone' 
    }); 


    $('.drop-zone img').resizable({ //this doesn't work because its cloned "inside" but its what I want working 
     helper: "ui-resizable-helper" 
    }); 


    // '.inside-drop-zone img' also doesnt work 
    // 
});

来源

2012-03-22 03:18:20 Supr

嗯嗯大声笑，还挺明显呃，/ sma头 – Wyck 2012-03-22 03:28:55

克隆诞生时，将可调整大小的创建绑定到某种事件？

$('.drop-zone').on('hover', '.drag', function() { 
    $(this).resizable({ 
     helper: "ui-resizable-helper" 
    }); 
});

来源

2012-03-22 03:08:42 Terry

只需使用：

$clone.children().resizable({ 
    helper: "ui-resizable-helper" 
});

和class: drop-zone下的所有图片将调整大小。

来源

2012-11-30 11:41:19

你如何调整克隆的jQuery UI元素（图片）

回答

相关问题