无法在可放置区域重新拖动放置的元素答案

【问题标题】：Cannot redrag a dropped element on a droppable area无法在可放置区域重新拖动放置的元素
【发布时间】：2014-11-10 11:30:47
【问题描述】：

我正在尝试创建一个页面，我想在其中拖动一个按钮。如果我想改变按钮的位置，我想再次拖动它。但它不工作。

这是我的代码

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery-ui-1.11.2.custom/jquery-ui.min.css" />
<link rel="stylesheet" href="extern1.css" />
<script type="text/javascript" src="jquery-ui-1.11.2.custom/external/jquery.js>
</script>
<script type="text/javascript" src="jquery-ui-1.11.2.custom/jquery-ui.min.js"></script>
<script type="text/javascript" src="app1.js"></script>
</head>
<body>
<button id="drag" class="btn btn-primary">Drag me</button>
<div id="drop">Drop here</div>
</body>
</html>

这里是app1.js页面代码

$(function () {
$('#drag').draggable({
    cursor : "move",
    helper : function (event) {
        return $('<div class="col-xs-2"><button class="btn btn-primary check">
Button</button></div>');
    },
    //appendTo : "#drop",
    cancel : false
});
$("#drop").droppable({
    drop : function (event, ui) {
        //clone and remove positioning from the helper element
        var newDiv = $(ui.helper).clone(false)
            .removeClass('ui-draggable-dragging')
            .css({
                position : 'absolute'
            });
        $(this).append(newDiv);
    }
});
})

【问题讨论】：

标签： jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案1】：

您只需要将克隆的元素也初始化为draggable()，如下所示：

$(function() {
  $('#drag').draggable({
    cursor: "move",
    helper: function(event) {
      return $('<div class="col-xs-2"><button class="btn btn-primary check">Button</button></div>');
    },
    cancel: false
  });
  $("#drop").droppable({
    drop: function(event, ui) {
      //clone and remove positioning from the helper element
      var $newDiv = ui.helper.clone(false)
        .removeClass('ui-draggable-dragging')
        .css({
          position: 'absolute'
        }).draggable({ //make it draggable
          cancel: false
        }).appendTo(this);
    }
  });
})

#drop {
  width: 100px;
  height: 100px;
  background: dodgerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<button id="drag" class="btn btn-primary">Drag me</button>
<div id="drop">Drop here</div>

【讨论】：

但是它在第二次拖动它时创建了一个重复的元素。
@AshishSantikari 这是根据你的逻辑。您正在drop 上创建一个新元素。您的问题是“无法重新拖动放置的元素”。我解决了这个问题。现在，如果您只是 drag 新元素，它将不会创建 dup 元素。如果你 drop droppable 中的项目，那么它将创建新的可拖动项目，因为那是你写的。
@AshishSantikari BTW - 重新阅读您的问题。答案回答了所问的问题。你问什么，你就会得到答案......我们无法读懂你的想法......所以也许用一个明确的问题陈述来更新这个问题。说明具体需要做什么。
好的。那你能帮我解决我的“应该是”问题吗？？
@AshishSantikari 当然，我只是这么说，以便您以后可以提出改进您的问题。