我的代码中有一个错误,但由于js fiddle here中的所有内容都正常,我无法找到它的位置我在jsfiddle中使用与本地文件完全相同的代码但是当我运行页面时它只能工作那里。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="draggableItem"></div>
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<tr>
<!-- snip here are some more columns like this, see jsfiddle for that-->
</table>
</body>
</html>
js看起来像这样
$(document).ready(function (){
$("#draggableItem").draggable({
appendTo: "body",
helper: 'clone',
revert: 'invalid'
});
$("td").droppable({
tollerance: "pointer",
accept: "#draggableItem",
drop: function(event,ui){
$(this).append($(ui.draggable).clone());
}
});
});
最后,应该有某种象棋场,用户应该可以将div拖入其中(td
元素)。在我的本地计算机上,draggableItem
一拖动就变为不可见,tollerance: "pointer"
似乎完全被忽略。我不知道为什么它在JsFiddle中完美运行但是相同的代码没有显示任何动画并且丢弃到错误的位置或者根本不丢弃任何东西。我的控制台输出中没有错误,并且chrome,firefox或IE没有差异。当我从中删除所有选项时,我只看到Draggable的动画。
有没有人知道我做错了什么?
非常感谢