Jquery ui 可拖动内部可调整大小-不显示拖动项
我一直在尝试让一个基本的拖放界面工作。我用了一组div，但当我把div改成可调整大小的手风琴时，我发现当我移动到可调整大小的div的边界之外时，图像将不会显示。光标保持不变，并且拖动项目的图像似乎绘制在可调整大小的div上。当光标移离手风琴时，可以看到滚动条移动。 下降操作“似乎”按预期进行。唯一的问题是保留拖动项目的可见性。我尝试了Jquery ui 可拖动内部可调整大小-不显示拖动项,jquery-ui,draggable,resizable,Jquery Ui,Draggable,Resizable,我一直在尝试让一个基本的拖放界面工作。我用了一组div，但当我把div改成可调整大小的手风琴时，我发现当我移动到可调整大小的div的边界之外时，图像将不会显示。光标保持不变，并且拖动项目的图像似乎绘制在可调整大小的div上。当光标移离手风琴时，可以看到滚动条移动。 下降操作“似乎”按预期进行。唯一的问题是保留拖动项目的可见性。我尝试了zIndex，但没有效果 我本应该包括显示效果的图像和示例代码，但我没有10个声誉来发布图像 <!doctype html> <html lang
zIndex<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo</title>
<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
<script src="./jquery-1.8.3.js"></script>
<script src="../ui/jquery.ui.core.js"></script>
<script src="../ui/jquery.ui.widget.js"></script>
<script src="../ui/jquery.ui.mouse.js"></script>
<script src="../ui/jquery.ui.resizable.js"></script>
<script src="../ui/jquery.ui.accordion.js"></script>
<script src="../ui/jquery.ui.draggable.js"></script>
<script src="../ui/jquery.ui.droppable.js"></script>
<link rel="stylesheet" href="./mainDemo.css">
<style>
#accordion-resizer {
padding: 10px;
width: 100px;
height: 400px;
}
</style>
<script>
$(function() {
$( "#accordion" ).accordion({
heightStyle: "fill"
});
});
$(function() {
$( "#accordion-resizer" ).resizable({
minHeight: 140,
minWidth: 50,
resize: function() {
$( "#accordion" ).accordion( "refresh" );
}
});
});
</script>
<script type="text/javascript">
$(init);
function init() {
$('#cardPile').html('');
var numbers = [ 'test a ','test b', 'test c' ];
for (var i = 0; i < 3; i++) {
createItem(numbers[i], '#baseWidgets', ['#content','#selection'], '#baseWidgets div' );
}
$('#displayCanvas').droppable({
accept: '#baseWidgets div',
hoverClass: 'hovered',
drop:handleCardDrop
});
}
function createItem( title, parent, container, stack )
{
var el = '<div>' + title + '</div>';
var $div = $(el).data('number', title).attr('id', 'card' + title).appendTo(parent).draggable({
containment: ['displayCanvas','content'],
stack: stack,
cursor: 'move',
zIndex:1000,
scroll: false,
revert: true
});
}
function handleCardDrop(event, ui) {
}
</script>
</head>
<body>
<div id="content">
<div id="accordion-resizer" >
<div id="accordion">
<h3>Basic</h3>
<div id ="selection" >
<div id="baseWidgets"> </div>
</div>
<h3>Advanced</h3>
<div>
<p>Some data</p>
</div>
</div>
</div>
<div id="displayCanvas">
</div>
</div>
</body>
</html>
body {
font-size: 62.5%;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}
table {
font-size: 1em;
}
#selection {
margin: 2px 2px;
position: relative;
vertical-align: middle;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
border-radius: 8px;
}
.imgcls {
width: 32px;
height: 32px;
border: 1px solid #a8cad0;
border-radius: 2px;
position: relative;
}
.demo-description {
clear: both;
padding: 12px;
font-size: 1.3em;
line-height: 1.4em;
}
#baseWidgets div.ui-draggable-dragging {
-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}
#displayCanvas
{
margin: 2px 2px;
height: 92%;
width: 99.5%;
top: 4%;
position: relative;
vertical-align: middle;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
background: #ebedf2;
border: 1px solid #333;
border-radius: 8px;
}
#content {
margin: 2px 2px;
height: 92%;
width: 99.5%;
top: 4%;
position: fixed;
vertical-align: middle;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
background: #ebedf2;
border: 1px solid #333;
border-radius: 8px;
}
演示
#手风琴重调器{
填充：10px；
宽度：100px；
高度：400px；
}
$（函数（）{
$（“手风琴”）。手风琴({
高度样式：“填充”
});
});
$（函数（）{
$（“#手风琴大小调整器”）。可调整大小({
身高：140，
最小宽度：50，
调整大小：函数（）{
$（“手风琴”）。手风琴（“刷新”）；
}
});
});
美元（初始）；
函数init（）{
$（'#cardPile'）.html（''）；
变量编号=[‘测试a’、‘测试b’、‘测试c’]；
对于（变量i=0；i<3；i++）{
createItem（数字[i]、“#baseWidgets”、“内容”、“选择”、“baseWidgets div”）；
}
$（'#displayCanvas'）。可拖放({
接受：“#baseWidgets div”，
hoverClass:“悬停”，
滴落：手推车滴落
});
}
函数createItem（标题、父级、容器、堆栈）
{
变量el=“”+标题+“”；
var$div=$（el）.data（'number'，title）.attr（'id'，'card'+title）.appendTo（parent）.draggable({
包含：['displayCanvas'，'content']，
堆栈：堆栈，
光标：“移动”，
zIndex:1000，
卷轴：错，
回复：真
});
}
函数handleCardDrop（事件，ui）{
}
基本的
先进的
一些数据
身体{
字体大小：62.5%；
字体系列：“投石机MS”、“Arial”、“Helvetica”、“Verdana”、“无衬线”；
}
桌子{
字号：1em；
}
#挑选{
保证金：2px2px；
位置：相对位置；
垂直对齐：中间对齐；
文本对齐：居中；
-moz用户选择：无；
-webkit用户选择：无；
用户选择：无；
边界半径：8px；
}
.imgcls{
宽度：32px；
高度：32px；
边框：1px实心#a8cad0；
边界半径：2px；
位置：相对位置；
}
.演示说明{
明确：两者皆有；
填充：12px；
字体大小：1.3em；
线高：1.4em；
}
#baseWidgets div.ui-draggable-draggable{
-moz盒阴影：0.5emrgba（0,0,0,8）；
-webkit盒阴影：0.5EMRGBA（0,0,0,8）；
盒影：0.5emrgba（0,0,0,8）；
}
#显示画布
{
保证金：2px2px；
身高：92%；
宽度：99.5%；
最高：4%；
位置：相对位置；
垂直对齐：中间对齐；
文本对齐：居中；
-moz用户选择：无；
-webkit用户选择：无；
用户选择：无；
背景#ebedf2；
边框：1px实心#333；
边界半径：8px；
}
#内容{
保证金：2px2px；
身高：92%；
宽度：99.5%；
最高：4%；
位置：固定；
垂直对齐：中间对齐；
文本对齐：居中；
-moz用户选择：无；
-webkit用户选择：无；
用户选择：无；
背景#ebedf2；
边框：1px实心#333；
边界半径：8px；
}