代码如下。难道是我UI组件没有导入吗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.draggable.js"></script>
<script type="text/javascript" src="jquery.ui.droppable.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
</head>
<body>
<div class="phframe">
<ul id="photo" class="photo">
<li class="photoframecontent photoframetr">
<h5 class="photoframeheader">java</h5>
<img src="a1.jpg" alt="2006年作品" width="85" height="120"/>
<span>2006年</span>
<a href="#" title="放入回收站" class="phtrash">删除</a>
</li>
<li class="photoframecontent photoframetr">
<h5 class="photoframeheader">java</h5>
<img src="a2.jpg" alt="2008年作品" width="85" height="120"/>
<span>2008年</span>
<a href="#" title="放入回收站" class="phtrash">删除</a>
</li>
<li class="photoframecontent photoframetr">
<h5 class="photoframeheader">java</h5>
<img src="a3.jpg" alt="2010年作品" width="85" height="120"/>
<span>2010年</span>
<a href="#" title="放入回收站" class="phtrash">删除</a>
</li>
</ul>
<div id="trash" class="photoframecontent">
<h4 class="photoframeheader">回收站</h4>
</div>
</div>
</body>
<script>
$(function () {
var $photo=$("#photo");
var $trash=$("#trash");
$("li",$photo).draggable({
revert:"invalid",
helper:"clone",
cursor:"move"
});
$trash.droppable({
accept:"#photo li",
activeClass:"highlight",
drop:function (event,ui) {
deleteImage(ui.draggable);
}
});
$photo.droppable({
accept:"#trash li",
activeClass:"active",
drop:function (event,ui) {
recycleImage(ui.draggable);
}
});
var recyclelink="<a href='#' title='从回收站还原' class='phrefresh'>还原</a>";
function deleteImage($item) {
$item.fadeOut(function () {
var $list=$("<ul class='photo reset'/>").appendTo($trash);
$item.find("a.phtrash").remove();
$item.append(recyclelink).appendTo($list).fadeIn(function () {
$item.animate({
width:"61px"
}).find("img").animate({height:"86px"});
});
});
}
var trashlink="<a href='#' title='放入回收站' class='phtrash'>删除</a>";
function recycleImage($item) {
$item.fadeOut(function () {
$item.find("a.phrefresh").remove().end().css("width","85px").append(trashlink).find("img").css("height","120px").end().appendTo($photo).fadeIn();
});
}
$("ul.photo li").click(function (event) {
var $item=$(this),
$target=$(event.target);
if($target.is("a.phtrash")){
deleteImage($item);
}else if($target.is("a.phrefresh")){
recycleImage($item);
}
return false;
});
});
</script>
</html>
把你的jquery ui 换成这个试试 <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>