jQuery可拖动和可拖放，并在可拖动ul上滚动_Jquery_Css_Jquery Ui_Height_Overflow

jQuery可拖动和可拖放，并在可拖动ul上滚动

jquery css jquery-ui

jQuery可拖动和可拖放，并在可拖动ul上滚动,jquery,css,jquery-ui,height,overflow,Jquery,Css,Jquery Ui,Height,Overflow,电流输出预期产出正如我们在第一幅图中所看到的，可拖动的ulli位于可拖放区域的右侧当我从数据库中获取内容时，我将在drag-ableul中拥有n个元素但是，当我尝试将高度：800px和溢出-x：滚动到可拖动ul时，我无法看到已放置在可拖动区域的元素以下是代码，供参考 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

电流输出

预期产出

正如我们在第一幅图中所看到的，可拖动的

ul

li

位于可拖放区域的右侧

当我从数据库中获取内容时，我将在drag-able

ul

中拥有n个元素

但是，当我尝试将高度：800px和溢出-x：滚动到可拖动

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>


新网络项目
阿里亚尔维先生{
背景色：#999999；
背景图片：url（“jummy.jpg”）；
背景位置：中心；
背景重复：无重复；
高度：800px；
宽度：1200px；
浮动：左；
}
.阿里亚尔维耶沃顿酒店{
列表样式：无；
填充：0px；
边际：0px；
浮动：左；
左边框：1px实心#000；
}
阿里亚尔维耶沃普提斯·李{
填充物：5px；
}
新建Web项目页面


AA


BB


科科斯群岛


DD


EE


FF


游戏打得好


嗯


二,


AA11


BB11


CC11


DD11


EE11


FF11


GG11


HH11


II11


AA22


BB22


CC22


DD22


EE22


FF22


GG22


HH22


II22


AA221


BB221


CC221


DD221


EE221


FF221


GG221


HH221


II221


$（“.arialviewooptions li”）.draggable（）；
$（“.arialView”）。可拖放({
activeClass：“ui状态悬停”，
hoverClass：“ui状态处于活动状态”，
drop：函数（事件、用户界面）{
saveOffset（$（ui.draggable.attr（“id”）、ui.offset）；
}
});
setData（）；
函数saveOffset（jObject、jOffset）{
var storedData=$.cookie（“cookie数据”）；
if（storedData！=未定义）{
storedData=$.parseJSON（storedData）；
}否则{
storedData=新对象（）；
}
storedData[jObject]=jOffset；
$.cookie（'u cookie'u data'，JSON.stringify（storedData））；
}
函数setData（）{
var storedData=$.cookie（“cookie数据”）；
console.log（storedData）；
if（storedData！=未定义）{
storedData=$.parseJSON（storedData）；
$.each（存储数据、函数（键、值）{
$（“#”+键）。偏移量（值）；
$（“.arialviewooptions”）.append（“”++$（“#“+key.html（）+””）；
$（“.arialviewooptions li[rel=“+key+”]”）.offset（value）.addClass（“needToAnimate”）；
});
$.each（$（“.needToAnimate”）、函数（键、值）{
var main=这个；
var offset=$（main.css（“top”）；
$（主）。设置动画({
顶部：（parseInt（偏移量）-20）+“px”
}，1000，'线性'。设置动画({
顶部：（parseInt（偏移量））+“px”
}，1000，'线性'；
setInterval（函数（）{
$（主）。设置动画({
顶部：（parseInt（偏移量）-20）+“px”
}，1000，'线性'。设置动画({
顶部：（parseInt（偏移量））+“px”
}，1000，'线性'；
}, 2200);
});
}
}

已解决

只需对css进行几次破解，就可以完成了……）

第一个变化：

.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;
}

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>