Question

我正在尝试创建一个我要在某个地方拖动按钮的页面。如果我想改变按钮的位置，我想再次拖动它。但它没有成功。

这是我的代码

<!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);
    }
});
})

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

无法对可放置区域中的已删除元素进行重新划分

1 个答案: