jQuery可拖动隐藏与CSS3多列
Posted
技术标签:
【中文标题】jQuery可拖动隐藏与CSS3多列【英文标题】：jQuery draggable hides with CSS3 multiple column 【发布时间】：2013-06-29 22:52:51 【问题描述】：我正在尝试跨多个 CSS3 列进行拖放。我遇到的问题是可拖动的位于它旁边的列后面。如果我不使用 CSS3 列，那么它可以正常工作。
见this Codepen。
HTML：
<div class='row-fluid recurring-items'>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Baking
</h4>
<ul class='unstyled recurring-aisle' id="aisle-11">
<li class='recurring-item'>
<!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
<span class='handle'>H</span>
All Purpose Flour
<!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
<li class='recurring-item'>
<!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
<span class='handle'>H</span>
Sugar
<!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
<li class='recurring-item'>
<!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
<span class='handle'>H</span>
Brown Sugar
<!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Bread & baked goods
</h4>
<ul class='unstyled recurring-aisle' id="aisle-6">
<li class='recurring-item'>
<!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
<span class='handle'>H</span>
Whole Wheat Bread
<!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Canned goods
</h4>
<ul class='unstyled recurring-aisle' id="aisle-9">
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Cereal
</h4>
<ul class='unstyled recurring-aisle' id="aisle-10">
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Condiments & sauces
</h4>
<ul class='unstyled recurring-aisle' id="aisle-14">
<li class='recurring-item'>
<!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
<span class='handle'>H</span>
Dijon Mustard
<!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Dairy
</h4>
<ul class='unstyled recurring-aisle' id="aisle-3">
<li class='recurring-item'>
<!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
<span class='handle'>H</span>
Milk
<!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Deli
</h4>
<ul class='unstyled recurring-aisle' id="aisle-7">
<li class='recurring-item'>
<!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
<span class='handle'>H</span>
Turkey Slices
<!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Drinks & snacks
</h4>
<ul class='unstyled recurring-aisle' id="aisle-12">
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Dry packaged goods
</h4>
<ul class='unstyled recurring-aisle' id="aisle-15">
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Frozen
</h4>
<ul class='unstyled recurring-aisle' id="aisle-1">
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Meat/poultry
</h4>
<ul class='unstyled recurring-aisle' id="aisle-4">
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Misc
</h4>
<ul class='unstyled recurring-aisle' id="aisle-8">
<li class='recurring-item'>
<!-- <i class='icon-reorder handle has-tooltip' title="drag to another aisle"></i> -->
<span class='handle'>H</span>
cream
<!-- <i class='icon-remove-circle has-tooltip' title='Remove item' data-remove-url></i> -->
</li>
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Produce
</h4>
<ul class='unstyled recurring-aisle' id="aisle-2">
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Seafood
</h4>
<ul class='unstyled recurring-aisle' id="aisle-5">
</ul>
</div>
<div class='recurring-items-aisle'>
<h4 class='recurring-items-header'>
Spices
</h4>
<ul class='unstyled recurring-aisle' id="aisle-13">
</ul>
</div>
</div>
SCSS：
@import "compass/css3";
@import "compass/css3";
.planning-prefs
margin-left: 20px;
@media all and (min-width: 300px)
.recurring-items
@include column-count(2);
@include column-gap(20px);
@media all and (max-width: 975px) and (min-width: 600px)
.recurring-items
@include column-count(3);
@include column-gap(20px);
@media all and (min-width: 975px)
.recurring-items
@include column-count(5);
@include column-gap(20px);
.recurring-items-header
font-weight: bold;
text-decoration: underline;
.recurring-items-aisle
display: inline-block;
width: 100%;
.recurring-item
width: 95%;
.handle
cursor: pointer;
CoffeeScript：
jQuery ->
$('li.recurring-item').draggable
handle: '.handle'
revert: true
appendTo: 'body'
$('ul.recurring-aisle').droppable
drop: ->
alert('dropped')
任何帮助将不胜感激。
【问题讨论】：
嘿，你找到解决办法了吗？我正在尝试做同样的事情。 是和不是。我最终选择了左浮动方法而不是 CSS3 列，因为对于我的 UI，它在响应式布局上效果更好。 JS 也有点 hacky，因为我必须克隆/隐藏才能越界。这是修改后的codepen。我不会回答这个问题，因为我实际上并没有按照我要求的方式去做。也许其他人对原始问题有不同的方法。我使用的 JS 可能确实适用于 CSS3 列...我没有尝试过。 @NickBurdick 我添加了一个可能的解决方案，你能看看是否对你有意义吗？ @MichaelBates 和你？ 【参考方案1】：我修复了使用克隆属性，并将样式更改为拖动元素。
http://codepen.io/luarmr/pen/KpvpOb
jQuery ->
$('li.recurring-item').draggable
handle: '.handle'
revert: true
helper: 'clone'
appendTo: 'body'
$('ul.recurring-aisle').droppable
hoverClass: "dropphover"
drop: ->
alert(this.innerhtml)
在 CSS 中，拖动时重复项的宽度限制很重要：
.recurring-item.ui-draggable-dragging
width:200px;
我添加了一些颜色，这对我更有帮助。
其他的都是原来的codepen。
注意我瘦了 Nick Burdick 已经解决了它，因为我用浮点数更改了你的第二个代码笔，并且你已经使用了 helper clone 并且在列中可以正常工作：
http://codepen.io/luarmr/pen/zGdvvx
【讨论】：
以上是关于jQuery可拖动隐藏与CSS3多列的主要内容，如果未能解决你的问题，请参考以下文章
jquery-ui sortable - 拖动时隐藏原始列表隐藏被拖动项