Question

出乎意料的是，我在控制台中看到了以下错误。我正在加载

<link rel="stylesheet" href="jquery-ui.min.css"> //head
<script src="jquery-2.1.4.min.js"></script> //end of body
<script src="jquery-ui.min.js"></script> //end of body
<script src="belowScript.js"></script> //end of body

Uncaught TypeError: $(...).draggable is not a function

belowScript.js：

$( document ).ready(function() {
    function myFunc(e){
       ///some code
       $('#main').draggable({
          containment: $('#net')
       })
       ///some code
    }
});

出了什么问题，怎样才能解决这个问题？

Answer 1

不确定这是否适合你。我做了一些猜测：https://jsfiddle.net/Twisty/ukh1r21t/

<强> HTML

<h2>Drag Test</h2>
<button id="make">Make (Upload) Image</button>
<div id="net">
</div>

<强> CSS

#net {
  border: 1px solid #222;
  height: 200px;
  width: 300px;
  background: #ccc;
  margin: 10px;
}

.canDrag {
  margin: 3px;
  background: #fff;
  border: 1px solid #999;
  width: 40px;
  height: 60px;
}

JQuery UI

$(function() {
  $("#make").click(function() {
    var i = $(".canDrag").length;
    var newImg = $("<img>", {
      src: "#",
      id: "main-" + i,
      class: "canDrag"
    });
    newImg.draggable({
      containment: $('#net')
    });
    $("#net").append(newImg);
  });
});

创建新的Image对象，然后将其初始化为可拖动对象。您可以使用Class对它们进行格式化，并且每个都可以获得自己的唯一ID。然后，您可以根据需要设置src值。

控制台中的draggable（）错误

1 个答案: