我有一个网页,我在右边的项目可以拖动到左侧的列中。效果很好,除了我想在右侧的项容器上设置固定高度或最大高度,并应用overflow-y:scroll。当我尝试这样做时,项目会拖动到目标列下而不是顶部。如果我从项容器div中取出溢出属性,它可以正常工作。
有人可以指出我出错的地方吗?如何获得可滚动的可拖动列表?
JS Fiddle HERE来表明我的意思...... https://jsfiddle.net/bvxxetot/
以下是我用来初始化可拖动/可放置区域的javascript代码
HTML
<div id="tmpl-view-builder-container">
<div id="tmpl-view-preview-container">
<div class="droppable">
</div>
</div>
<div id="tmpl-view-legend-container">
<h3>Available Fields</h3>
<div id="tmpl-view-legend-item-container">
<ul>
<li>Field 1</li>
<li>Field 2</li>
<li>Field 3</li>
<li>Field 4</li>
<li>Field 5</li>
<li>Field 6</li>
<li>Field 7</li>
<li>Field 8</li>
<li>Field 9</li>
<li>Field 10</li>
</ul>
</div>
</div>
</div>
CSS
.droppable { border:1px dashed #000000; width:75%; float:left; height:400px;}
#tmpl-view-legend-container {
position:absolute;
right:20px;
top:0px;
height:400px;
overflow-y:scroll;
}
#tmpl-view-legend-container ul { list-style-type:none; padding:0; }
#tmpl-view-legend-container ul li { background:#CCCCCC; margin-bottom:10px; padding:7px 10px; cursor:pointer; }
JS
$(function() {
$('.droppable').droppable({
accept:'#tmpl-view-legend-item-container li',
hoverClass: 'hovered',
drop: testDropFunction
});
$('#tmpl-view-legend-item-container li').draggable({
stack: '#tmpl-view-legend-items li',
cursor: 'move',
revert: true,
appendTo: 'body'
});
});
function testDropFunction(event, ui) {
alert('Testing!');
}
谢谢你!
答案 0 :(得分:5)
您可以使用helper: 'clone'
获取此功能,但是您需要添加一些代码来修复一些问题。
在draggable构造函数中:
helper: 'clone',
start: function(e, ui) {
ui.helper.width($(this).width());
$(this).css('visibility', 'hidden');
},
stop: function(e, ui) {
$(this).css('visibility', '');
}
在CSS中:
li.ui-draggable.ui-draggable-handle.ui-draggable-dragging { list-style-type:none; background:#CCCCCC; margin-bottom:10px; padding:7px 10px; cursor:pointer; }
这是一个有效的jsfiddle,基于你的代码:
https://jsfiddle.net/ahx7urbk/