个人中心
gpt4 book ai didi

jQuery draggable and droppable with scroll on draggable ul

转载 作者：技术小花猫 更新时间：2023-10-29 11:24:19 26 4
gpt4 key购买 nike

当前输出

current output

预期输出 expected output

正如我们在第一张图片中看到的，可拖动的 ul li 位于可放置区域的右侧。

当我从数据库中获取内容时，我将在可拖动的 ul 中拥有 n 个元素。

但是当我尝试将 height : 800px 和 overflow-x : scroll 放到可拖动的 ul 时，我无法查看已放置在可放置区域的元素。

供引用，这里是代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>

        <script src="jquery/js/jquery-1.9.1.js"></script>
        <script src="jquery/js/jquery-cookie.js"></script>
        <script src="jquery/js/jquery-ui-1.10.3.custom.min.js"></script>

        <link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">
        <style>
            .arialView {
                background-color: #999999;
                background-image: url("Chrysanthemum.jpg");
                background-position: center center;
                background-repeat: no-repeat;
                height: 800px;
                width: 1200px;
                float: left;
            }

            .arialViewOptions {
                list-style: none;
                padding: 0px;
                margin: 0px;
                float: left;
                border-left: 1px solid #000;
            }

            .arialViewOptions li {
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <h1>New Web Project Page</h1>

        <div class="arialView">
            &nbsp;
        </div>
        <ul class="arialViewOptions">
            <li id="1">
                AA
            </li>
            <li id="2">
                BB
            </li>
            <li id="3">
                CC
            </li>
            <li id="4">
                DD
            </li>
            <li id="5">
                EE
            </li>
            <li id="6">
                FF
            </li>
            <li id="7">
                GG
            </li>
            <li id="8">
                HH
            </li>
            <li id="9">
                II
            </li>

            <li id="11">
                AA11
            </li>
            <li id="22">
                BB11
            </li>
            <li id="33">
                CC11
            </li>
            <li id="44">
                DD11
            </li>
            <li id="55">
                EE11
            </li>
            <li id="66">
                FF11
            </li>
            <li id="77">
                GG11
            </li>
            <li id="88">
                HH11
            </li>
            <li id="99">
                II11
            </li>

            <li id="111">
                AA22
            </li>
            <li id="222">
                BB22
            </li>
            <li id="333">
                CC22
            </li>
            <li id="444">
                DD22
            </li>
            <li id="555">
                EE22
            </li>
            <li id="666">
                FF22
            </li>
            <li id="777">
                GG22
            </li>
            <li id="888">
                HH22
            </li>
            <li id="999">
                II22
            </li>

            <li id="1111">
                AA221
            </li>
            <li id="2222">
                BB221
            </li>
            <li id="3333">
                CC221
            </li>
            <li id="4444">
                DD221
            </li>
            <li id="5555">
                EE221
            </li>
            <li id="6666">
                FF221
            </li>
            <li id="7777">
                GG221
            </li>
            <li id="8888">
                HH221
            </li>
            <li id="9999">
                II221
            </li>
        </ul>

    </body>

    <script>
        $(".arialViewOptions li").draggable();
        $(".arialView").droppable({
            activeClass : "ui-state-hover",
            hoverClass : "ui-state-active",
            drop : function(event, ui) {
                saveOffset($(ui.draggable).attr("id"), ui.offset);
            }
        });

        setData();

        function saveOffset(jObject, jOffset) {
            var storedData = $.cookie('the_cookie_data');

            if (storedData != undefined) {
                storedData = $.parseJSON(storedData);
            } else {
                storedData = new Object();
            }

            storedData[jObject] = jOffset;
            $.cookie('the_cookie_data', JSON.stringify(storedData));
        }

        function setData() {
            var storedData = $.cookie('the_cookie_data');
            console.log(storedData);
            if (storedData != undefined) {
                storedData = $.parseJSON(storedData);
                $.each(storedData, function(key, value) {
                    $("#" + key).offset(value);
                    $(".arialViewOptions").append("<li rel='" + key + "'>" + $("#" + key).html() + "</li>");
                    $(".arialViewOptions li[rel=" + key + "]").offset(value).addClass("needToAnimate");
                });

                $.each($(".needToAnimate"), function(key, value) {

                    var main = this;

                    var offset = $(main).css("top");

                    $(main).animate({
                        top : (parseInt(offset) - 20) + "px"
                    }, 1000, 'linear').animate({
                        top : (parseInt(offset)) + "px"
                    }, 1000, 'linear');

                    setInterval(function() {

                        $(main).animate({
                            top : (parseInt(offset) - 20) + "px"
                        }, 1000, 'linear').animate({
                            top : (parseInt(offset)) + "px"
                        }, 1000, 'linear');

                    }, 2200);

                });
            }
        }
    </script>
</html>

最佳答案

解决了..

只是几个 css hack 就完成了.. ;)

第一个变化:

.arialView {
    background-color: #999999;
    background-image: url("Chrysanthemum.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    float: left;
    height: 800px;
    **position: absolute;**
    width: 1200px;
}

第二个变化:

.arialViewOptions {
    border-left: 1px solid #000000;
    float: left;
    height: 800px;
    list-style: none outside none;
    margin: 0;
    overflow: auto;
    padding: 0 0 0 1200px;
    position: relative;
    width: 100px;
}

第三个变化:在 js 中

storedData = $.parseJSON(storedData);
                $.each(storedData, function(key, value) {
                    $("#" + key).css({top : value.top, left : value.left}).css("position", "fixed");
                    $(".arialViewOptions").append("<li rel='" + key + "'>" + $("#" + key).html() + "</li>");
                    $(".arialViewOptions li[rel=" + key + "]").css({top : value.top, left : value.left}).css("position", "fixed").addClass("needToAnimate");
                });

如果我还遗漏了什么......

这里是完整的文件。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>

        <script src="jquery/js/jquery-1.9.1.js"></script>
        <script src="jquery/js/jquery-cookie.js"></script>
        <script src="jquery/js/jquery-ui-1.10.3.custom.min.js"></script>

        <link rel="stylesheet" href="jquery/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">
        <style>
            .arialView {
                background-color: #999999;
                background-image: url("Chrysanthemum.jpg");
                background-position: center center;
                background-repeat: no-repeat;
                float: left;
                height: 800px;
                position: absolute;
                width: 1200px;
            }

            .arialViewOptions {
                border-left: 1px solid #000000;
                float: left;
                height: 800px;
                list-style: none outside none;
                margin: 0;
                overflow: auto;
                padding: 0 0 0 1200px;
                position: relative;
                width: 100px;
            }

            .arialViewOptions li {
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <h1>New Web Project Page</h1>

        <div class="arialView">
            &nbsp;
        </div>
        <ul class="arialViewOptions">
            <li id="1">
                AA
            </li>
            <li id="2">
                BB
            </li>
            <li id="3">
                CC
            </li>
            <li id="4">
                DD
            </li>
            <li id="5">
                EE
            </li>
            <li id="6">
                FF
            </li>
            <li id="7">
                GG
            </li>
            <li id="8">
                HH
            </li>
            <li id="9">
                II
            </li>

            <li id="11">
                AA11
            </li>
            <li id="22">
                BB11
            </li>
            <li id="33">
                CC11
            </li>
            <li id="44">
                DD11
            </li>
            <li id="55">
                EE11
            </li>
            <li id="66">
                FF11
            </li>
            <li id="77">
                GG11
            </li>
            <li id="88">
                HH11
            </li>
            <li id="99">
                II11
            </li>

            <li id="111">
                AA22
            </li>
            <li id="222">
                BB22
            </li>
            <li id="333">
                CC22
            </li>
            <li id="444">
                DD22
            </li>
            <li id="555">
                EE22
            </li>
            <li id="666">
                FF22
            </li>
            <li id="777">
                GG22
            </li>
            <li id="888">
                HH22
            </li>
            <li id="999">
                II22
            </li>

            <li id="1111">
                AA221
            </li>
            <li id="2222">
                BB221
            </li>
            <li id="3333">
                CC221
            </li>
            <li id="4444">
                DD221
            </li>
            <li id="5555">
                EE221
            </li>
            <li id="6666">
                FF221
            </li>
            <li id="7777">
                GG221
            </li>
            <li id="8888">
                HH221
            </li>
            <li id="9999">
                II221
            </li>
        </ul>

    </body>

    <script>
        $(".arialViewOptions li").draggable();
        $(".arialView").droppable({
            activeClass : "ui-state-hover",
            hoverClass : "ui-state-active",
            drop : function(event, ui) {
                saveOffset($(ui.draggable).attr("id"), ui.offset);
            }
        });

        setData();

        function saveOffset(jObject, jOffset) {
            var storedData = $.cookie('the_cookie_data');

            if (storedData != undefined) {
                storedData = $.parseJSON(storedData);
            } else {
                storedData = new Object();
            }

            storedData[jObject] = jOffset;
            $.cookie('the_cookie_data', JSON.stringify(storedData));
        }

        function setData() {
            var storedData = $.cookie('the_cookie_data');
            if (storedData != undefined) {
                storedData = $.parseJSON(storedData);
                $.each(storedData, function(key, value) {
                    $("#" + key).css({
                        top : value.top,
                        left : value.left
                    }).css("position", "fixed");
                    $(".arialViewOptions").append("<li rel='" + key + "'>" + $("#" + key).html() + "</li>");
                    $(".arialViewOptions li[rel=" + key + "]").css({
                        top : value.top,
                        left : value.left
                    }).css("position", "fixed").addClass("needToAnimate");
                });

                $.each($(".needToAnimate"), function(key, value) {

                    var main = this;

                    var offset = $(main).css("top");

                    $(main).animate({
                        top : (parseInt(offset) - 20) + "px"
                    }, 1000, 'linear').animate({
                        top : (parseInt(offset)) + "px"
                    }, 1000, 'linear');

                    setInterval(function() {

                        $(main).animate({
                            top : (parseInt(offset) - 20) + "px"
                        }, 1000, 'linear').animate({
                            top : (parseInt(offset)) + "px"
                        }, 1000, 'linear');

                    }, 2200);

                });
            }
        }
    </script>
</html>

关于jQuery draggable and droppable with scroll on draggable ul，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19856528/

26 4 0
文章推荐： linux - 重命名一系列文件
文章推荐： php - 批量将未知文件编码转换为 UTF-8
文章推荐： ios - iOS 应用程序 Google 跟踪代码管理器实现随机崩溃
文章推荐： linux - nm 报告符号已定义，但 ldd 报告符号未定义
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com