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

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

使用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>

用html标签中的img标签就可以做到。

是我做不到了...害

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps: 问答会员年卡【8折】购，限时加赠IT实体书，即可享受50次有问必答服务，了解详情>>>https://t.csdnimg.cn/RW5m