愚柴
2017-09-18 11:44
采纳率: 37.5%
浏览 2.7k
已采纳

jQueryUI模拟图片回收效果报错draggable is not a function

代码如下。难道是我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>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • carrykingdow 2017-09-19 01:10
    已采纳

    把你的jquery ui 换成这个试试 <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • devmiao 2017-09-18 15:56
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题