2 chungou chungou 于 2017.09.18 19:44 提问

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个回答

sunny_desmond
sunny_desmond   2017.09.19 09:10
已采纳

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

sunny_desmond
sunny_desmond 回复愚柴: 你的jquery 没有引用对,你引用的是core的版本。。望采纳~谢谢
2 个月之前 回复
chungou
chungou 可以了。那应该是UI没导入了。大神,应该怎么从本地文件导入。
2 个月之前 回复
devmiao
devmiao   Ds   Rxr 2017.09.18 23:56
Csdn user default icon
上传中...
上传图片
插入图片