jQuery 可拖动和可拖放，在可拖动 ul 上滚动
Posted
技术标签:
【中文标题】jQuery 可拖动和可拖放，在可拖动 ul 上滚动【英文标题】：jQuery draggable and droppable with scroll on draggable ul 【发布时间】：2013-11-20 07:31:41 【问题描述】：电流输出
预期输出
正如我们在第一张图片中看到的，可拖动的 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">
</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>
【问题讨论】：
【参考方案1】：解决了..
只需几个 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">
</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 可拖动和可拖放，在可拖动 ul 上滚动的主要内容，如果未能解决你的问题，请参考以下文章