Question

我一直试图让基本的拖放界面起作用。我使用一组div工作，但是当我将div改为可调整大小的手风琴时，我发现当我移动到可调整大小的div的边界之外时，图像将不会显示。光标保持不变，拖动项目的图像似乎在可调整大小的div上绘制。当光标离开手风琴时，您可以看到滚动条移动。丢弃操作“出现”按预期被拾取。唯一的问题是保留拖动项目的可见性。我试过zIndex没有效果。

我会包含显示效果的图片和示例代码，但我没有10张声望来发布图片。

<!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;

}

可调整大小的可拖动内容 - 未显示拖动项目

0 个答案: