使用 jquery-ui 调整大小后拖动克隆答案

【问题标题】：Dragging a clone after making it resizable with jquery-ui使用 jquery-ui 调整大小后拖动克隆
【发布时间】：2013-12-24 20:41:31
【问题描述】：

在制作可拖动和可调整大小的克隆时有点麻烦：

这段代码使克隆可拖动（addClass 与程序中的其他内容相关。）

if(ui.draggable[0].id){
$(this)
.append($(ui.helper).clone().draggable().addClass("resize"));

我尝试了以下操作，但随后克隆在掉落时消失了：

if(ui.draggable[0].id){
$(this)
.append($(ui.helper).clone().draggable().resizable().addClass("resize"));

这是我的测试页面。尝试拖动其中一个字符。一旦出现在连环画上，它们应该可以调整大小。我还尝试使用 addclass 使它们在放置后可调整大小，然后调用一些 jquery 以使具有该类的所有项目可调整大小，并且在调整大小时起作用，但拖动停止工作（而且看起来很笨重）：

http://www.thelionscall.com/wp-content/comic-creator/

【问题讨论】：

克里斯蒂，酷网络应用！当我在条带上拖动一个字符时，它不会调整大小......这是你的错误吗？或者是别的什么？从你的问题来看，问题似乎是别的。
我尝试让它调整大小使它不可拖动，所以我把它拿回来了。它看起来像： if(ui.draggable[0].id){ $(this) .append($(ui.helper).clone().draggable().resizable().addClass("resize resizable")) ; $(".resizable").resizable();它正在向该元素添加可调整大小的语法，以及我似乎遇到问题的可拖动元素。

标签： jquery jquery-ui

【解决方案1】：

这是一个非常棘手的问题......

不过，我已经到了某个地方。想看看吗？

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Document</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <style>
    #mainImg {
        position: absolute !important;
    }
  </style>
</head>
<body>
    <script>
    $(document).ready(function() {
        $("#mainImg").draggable();
        $("#mainImg").on('dragstop', function(event) { 
            event.preventDefault();
            $(this).resizable();
            $(this).draggable();
        });
    });
    </script>
    <div class="container">
        <img style="width: 700px;" src="test.png" id="mainImg" class="ui-widget-content" alt="Test Image">
    </div>
</body>
</html>

【讨论】：