我有一个容器,其中包含可拖动项目列表和带有可排序项目列表的容器.可拖动的&可排序列表已连接,允许用户将可拖动的克隆拖动到排序列表.
可拖动项目显示在垂直列表中,但可排序项目显示在水平列表中,通过向左浮动来实现.可排序项的容器将其溢出设置为auto,如果内容溢出,则会生成水平滚动条.两个容器紧挨着彼此,左侧的拖拽和左侧的拖曳.右侧的可排序.
我遇到的问题是当可排序项目的容器向右滚动时,从draggables容器中拖动会立即触发sortables的事件.看起来好像sortables容器的内容被移动到draggables的容器后面.
这是我的代码:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Sortables in scrollable divs</title>
<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("#sortable").sortable({
start: function(event, ui) {
if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag start");
},
stop: function(event, ui) {
if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag stopped");
if (ui.item !== null) console.log("sortable item \"" + ui.item.text() + "\" drag stopped");
}
});
$("#sortable").sortable("disable");
$("#draggable li").draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid',
cursor: "default",
cursorAt: { top: -5, left: -5 },
start: function(event, ui) {
if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag start");
},
stop: function(event, ui) {
if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag stopped");
}
});
$("#container2").mouseenter(function() {
console.log("enter sortable container");
$("#sortable").sortable("enable");
}).mouseleave(function() {
console.log("leaving sortable container");
$("#sortable").sortable("disable");
});
$("#draggable, #sortable").disableSelection();
});
</script>
<style type="text/css">
html, body, p, td, th, li, input, select, option, textarea
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#343E41;
}
.wrapper
{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
height: expression(this.parentNode.offsetHeight + "px");
}
.scroll-wrapper
{
position: relative;
width: 100%;
height: 100%;
overflow: auto;
height: expression(this.parentNode.offsetHeight + "px");
}
#container1
{
float:left;
width:200px;
height:400px;
overflow:auto;
border:solid #000 1px;
margin:5px;
}
#container2
{
float:left;
width:600px;
height:400px;
overflow:auto;
border:solid #000 1px;
margin:5px;
}
ul#draggable
{
padding:0;
margin:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
ul#draggable li
{
display:block;
margin:5px;
border:solid #000 1px;
height:50px;
width:150px;
}
ul#sortable
{
padding:0;
margin:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
height:380px;
width:744px;
}
ul#sortable li
{
display:block;
float:left;
margin:5px;
border:solid #000 1px;
height:370px;
width:50px;
text-align:center;
}
</style>
</head>
<body>
<form id="form1" action="">
<div id="container1">
<ul id="draggable">
<li>1A</li>
<li>2A</li>
<li>3A</li>
<li>4A</li>
<li>5A</li>
<li>6A</li>
<li>7A</li>
<li>8A</li>
<li>9A</li>
<li>10A</li>
<li>11A</li>
<li>12A</li>
</ul>
</div>
<div id="container2">
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</div>
</form>
</body>
在将项目拖动到可排序容器之前,如何避免触发可排序事件?
提前致谢
解决方法:
自从我发布这个问题以来,已经有很长一段时间了,从那时起,新版本的jQuery& jQuery UI已经发布.
此外,jQuery UI的开发团队添加了一个与sortables相关联的draggables的示例.
所以我已经更新了我上面的原始示例代码并对其进行了修改,以便使我的场景更好.我想要一个水平滚动可排序部分,在添加新项目时会自动展开.
我的下面的例子已经解决了我的问题,代码看起来更干净了.简单:
$(function () {
$("#sortable").sortable({
revert: true,
start: function (event, ui) {
$(this).width($(this).width() + ui.helper.width() + 12);
},
stop: function (event, ui) {
var w = 0;
$(this).children("li").each(function () {
w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2;
});
$(this).width(w);
}
});
var w = 0;
$("#sortable").children("li").each(function () {
w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2;
});
$("#sortable").width(w);
$("#draggable li").draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$("ul, li").disableSelection();
});
html, body, p, td, th, li, input, select, option, textarea
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#343E41;
}
.wrapper
{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
height: expression(this.parentNode.offsetHeight + "px");
}
.scroll-wrapper
{
position: relative;
width: 100%;
height: 100%;
overflow: auto;
height: expression(this.parentNode.offsetHeight + "px");
}
#container1
{
float:left;
width:200px;
height:400px;
overflow:auto;
border:solid #000 1px;
margin:5px;
}
#container2
{
float:left;
width:600px;
height:400px;
overflow:auto;
border:solid #000 1px;
margin:5px;
}
ul#draggable
{
padding:0;
margin:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
ul#draggable li
{
display:block;
margin:5px;
border:solid #000 1px;
height:50px;
width:150px;
}
ul#sortable
{
padding:0;
margin:0;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
height:380px;
}
ul#sortable li
{
display:block;
float:left;
margin:5px;
border:solid #000 1px;
height:370px;
width:50px;
text-align:center;
}
<script type="text/javascript" language="JavaScript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<form id="form1" action="">
<div id="container1">
<ul id="draggable">
<li>1A</li>
<li>2A</li>
<li>3A</li>
<li>4A</li>
<li>5A</li>
<li>6A</li>
<li>7A</li>
<li>8A</li>
<li>9A</li>
<li>10A</li>
<li>11A</li>
<li>12A</li>
</ul>
</div>
<div id="container2">
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
<li class="ui-state-default">11</li>
<li class="ui-state-default">12</li>
</ul>
</div>
</form>
想到有人,某个地方可能想做同样的事并需要一些帮助:D