来运好 2021-06-13 15:39 采纳率: 100%
浏览 53
已采纳

简单实现9张图片的显示和互换位置

不知道怎么让9张图片分区域展示并可以互换位置，嵌套在框架当中

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2021-06-13 17:23
    关注

    使用easyUI的draggle和dropable来实现拖拽和释放后实现交换就行了。。对你有帮助能点击采纳吗，谢谢~~

    DEMO如下

    <!DOCTYPE html>
<html style="height:100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Building a drag-drop shopping cart - jQuery EasyUI Demo</title>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body style="height:100%;">
    <div class="easyui-panel" fit="true" border="false" style="height:100%;overflow:hidden">
        <div class="products">
            <ul>
                <li>
                    <img src="http://www.jeasyui.com/demo/main/images/shirt1.gif" />
                </li>
                <li>
                    <img src="http://www.jeasyui.com/demo/main/images/shirt2.gif" />
                </li>
                <li>
                    <img src="http://www.jeasyui.com/demo/main/images/shirt3.gif" />
                </li>
                <li>
                    <img src="http://www.jeasyui.com/demo/main/images/shirt4.gif" />
                </li>
                <li>
                    <img src="http://www.jeasyui.com/demo/main/images/shirt5.gif" />
                </li>
                <li>
                    <img src="http://www.jeasyui.com/demo/main/images/shirt6.gif" />
                </li>
            </ul>
        </div>
    </div>

    <style type="text/css">
        .products {
            overflow: auto;
            height: 100%;
            background: #fafafa;
        }

        .products ul {
            list-style: none;
            margin: 0;
            padding: 0px;
        }

        .products li {
            display: inline;
            float: left;
            margin: 10px;
        }
        .products li img {
            border: 1px solid #333;
        }


    </style>
    <script>
        $(function () {
            $('.products img').draggable({
                revert: true,
                proxy: 'clone',
                onStartDrag: function () {
                    $(this).draggable('options').cursor = 'not-allowed';
                    $(this).draggable('proxy').css('z-index', 10);
                },
                onStopDrag: function () {
                    $(this).draggable('options').cursor = 'move';
                }
            }).droppable({
                onDragEnter: function (e, source) {
                    $(this).css('border-color','#f00')
                },
                onDragLeave: function (e, source) {
                    $(this).css('border-color', '#333')
                },
                onDrop: function (e, source) {
                    var tparent = $(this).css('border-color', '#333').parent(), sparent = $(source).parent();
                    tparent.append(source);
                    sparent.append(this)
                }
            });
        });

    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？