jQuery UI稳定连接列表项容器+ Zinxed问题 [英] jquery ui sotable connected list items container + zinxed issue
本文介绍了jQuery UI稳定连接列表项容器+ Zinxed问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用可连接列表进行排序的jquery ui. 我有两个问题.
1.拖动索引::当项目从一个列表说A拖动到另一个列表说B时，该项目在拖动时位于列表B的后面，但是一旦放下就可以正确显示.
2.容器滚动::将左侧列表中的项目拖动到右侧时，它会先滚动容器然后显示在其他列表中，而不是先显示占位符.
JSFIDDLE : http://jsfiddle.net/bababalcksheep/Cd4Sr/
类似: http://quasipartikel.at/multiselect_next/
HTML:
<div class="ui-splitselect ui-helper-clearfix ui-widget ui-widget-content">
<div class="ui-widget-content ui-splitselect-selected" style="width: 50%;">
<div class="ui-widget-header ui-helper-clearfix">
</div>
<ul id="sortable1" class="ui-splitselect-list" style="height: 200px;">
<li class="ui-splitselect-item ui-state-default">
<a class='ui-splitselect-handle-drag'><span class='ui-icon ui-icon-carat-2-n-s'></span></a>
<span class="ui-splitselect-handle-select">Test1</span>
<a class="ui-splitselect-handle-move" href="#"><span class="ui-icon ui-icon-plus"></span></a>
</li>
</ul>
</div>
<div class="ui-widget-content ui-splitselect-available" style="width:49.8%;">
<div class="ui-widget-header ui-helper-clearfix">
</div>
<ul id="sortable2" class="ui-splitselect-list" style="height: 200px;">
</ul>
</div>
</div>
CSS:
.ui-splitselect{font-size:.8em;width:100%!important;text-align:center;margin:0 auto;padding:0}
.ui-splitselect ul{-moz-user-select:none}
.ui-splitselect .ui-widget-header{border:none;font-size:11px}
.ui-splitselect-selected{float:left;border:none;margin:0;padding:0}
.ui-splitselect-available{float:left;border-top:none;border-bottom:none;border-right:none;margin:0;padding:0}
.ui-splitselect-list{position:relative;overflow:auto;overflow-x:hidden;list-style:none;width:100%;margin:0;padding:0}
.ui-splitselect-item{cursor:default;line-height:20px;height:20px;font-size:11px;list-style:none;display:list-item;white-space:nowrap;overflow:hidden;margin:1px;padding:0}
.ui-splitselect-item.ui-sortable-helper{z-index:99999}
.ui-splitselect-handle-select{float:left}
.ui-splitselect-handle-drag{float:left;height:20px;border-top:0;border-bottom:0;cursor:pointer;margin:0 10px 0 5px;padding:2px 5px}
.ui-splitselect-handle-move{text-decoration:none;cursor:pointer;float:right;height:20px;border-top:0;border-bottom:0;margin:0 5px 0 10px;padding:2px 5px}
解决方案
从类ui-splitselect-list中删除了overflow: auto;和overflow-x: hidden;.将类ui-splitselect溢出设置为overflow-y: auto;.
这是更新的 >>> JSFiddle<<<
CSS:
.ui-splitselect {
font-size: 0.8em;
width:100% !important;
padding: 0;
margin: 0 auto;
text-align:center;
overflow-y: auto; /*-----updated-----*/
}
.ui-splitselect-list {
position: relative;
padding: 0;
margin: 0;
list-style: none;
/*-----updated Removed overflow: auto;-----*/
/*-----updated Removed overflow-x: hidden;-----*/
width: 100%;
}
jQuery:
$("#sortable1, #sortable2").sortable({
connectWith: ".ui-splitselect-list",
containment: ".ui-splitselect",
scroll: false,
placeholder: "ui-state-highlight ui-splitselect-item"
}).disableSelection();
I am using jquery ui sortable with connected lists. I have 2 problems.
1.Drag Index: When item dragged from one list say A to other list say B, item goes behind the list B while dragged but appears correctly once dropped.
2.Container scrolling: When item from left side list is dragged to right,instead of showing place holder first, it scrolls container then appear on other list.
JSFIDDLE: http://jsfiddle.net/bababalcksheep/Cd4Sr/
Similar: http://quasipartikel.at/multiselect_next/
HTML:
<div class="ui-splitselect ui-helper-clearfix ui-widget ui-widget-content">
<div class="ui-widget-content ui-splitselect-selected" style="width: 50%;">
<div class="ui-widget-header ui-helper-clearfix">
</div>
<ul id="sortable1" class="ui-splitselect-list" style="height: 200px;">
<li class="ui-splitselect-item ui-state-default">
<a class='ui-splitselect-handle-drag'><span class='ui-icon ui-icon-carat-2-n-s'></span></a>
<span class="ui-splitselect-handle-select">Test1</span>
<a class="ui-splitselect-handle-move" href="#"><span class="ui-icon ui-icon-plus"></span></a>
</li>
</ul>
</div>
<div class="ui-widget-content ui-splitselect-available" style="width:49.8%;">
<div class="ui-widget-header ui-helper-clearfix">
</div>
<ul id="sortable2" class="ui-splitselect-list" style="height: 200px;">
</ul>
</div>
</div>
CSS:
.ui-splitselect{font-size:.8em;width:100%!important;text-align:center;margin:0 auto;padding:0}
.ui-splitselect ul{-moz-user-select:none}
.ui-splitselect .ui-widget-header{border:none;font-size:11px}
.ui-splitselect-selected{float:left;border:none;margin:0;padding:0}
.ui-splitselect-available{float:left;border-top:none;border-bottom:none;border-right:none;margin:0;padding:0}
.ui-splitselect-list{position:relative;overflow:auto;overflow-x:hidden;list-style:none;width:100%;margin:0;padding:0}
.ui-splitselect-item{cursor:default;line-height:20px;height:20px;font-size:11px;list-style:none;display:list-item;white-space:nowrap;overflow:hidden;margin:1px;padding:0}
.ui-splitselect-item.ui-sortable-helper{z-index:99999}
.ui-splitselect-handle-select{float:left}
.ui-splitselect-handle-drag{float:left;height:20px;border-top:0;border-bottom:0;cursor:pointer;margin:0 10px 0 5px;padding:2px 5px}
.ui-splitselect-handle-move{text-decoration:none;cursor:pointer;float:right;height:20px;border-top:0;border-bottom:0;margin:0 5px 0 10px;padding:2px 5px}
解决方案
Removed overflow: auto; and overflow-x: hidden; from the class ui-splitselect-list. Set the class ui-splitselect overflow to overflow-y: auto;.
Here is the updated >>>JSFiddle<<<
CSS:
.ui-splitselect {
font-size: 0.8em;
width:100% !important;
padding: 0;
margin: 0 auto;
text-align:center;
overflow-y: auto; /*-----updated-----*/
}
.ui-splitselect-list {
position: relative;
padding: 0;
margin: 0;
list-style: none;
/*-----updated Removed overflow: auto;-----*/
/*-----updated Removed overflow-x: hidden;-----*/
width: 100%;
}
jQuery:
$("#sortable1, #sortable2").sortable({
connectWith: ".ui-splitselect-list",
containment: ".ui-splitselect",
scroll: false,
placeholder: "ui-state-highlight ui-splitselect-item"
}).disableSelection();
这篇关于jQuery UI稳定连接列表项容器+ Zinxed问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
