Question

我一直在寻找解决此问题的方法，但尚未找到解决方案。我在可滚动区域内有一个列表，其中包含可拖动的元素。我正在设置它，以便我可以将该父div之外的元素拖动到可放置区域但是当我尝试拖动它时，它似乎只是在父div中移动。

.inputs{
                overflow-y: scroll;
                overflow-x:visible;
                height: 100px;
                float:left;
            }
            ul{
                width:50px;
                float:left;
            }
.spaces{
                float:right;
                border: 0px;
                width: 500px;
            }

.spaces td {
                background-color:#666666;
                margin:2px;
                width:184px;
                height: 99px;
                border:0px;
            }

这是可拖动和可投放项目的代码

$(".inputs li").draggable( {
                                                         opacity: .4,
                                                         create: function(){$(this).data('position',$(this).position())},
                                                         cursorAt:{left:15},
                                                         cursor:'move', 
                                                         revert:function(event, ui) {
                                                         $(this).data("draggable").originalPosition = {
                                                         top: 0,
                                                         left: 0
                                                         };
                                                         return !event;
                                                         },
                                                         start:function(){
                                                            $('.info').css('visibility', 'hidden');

                                                         }
                                                         });

                              $('.spaces').find('td').droppable({
                                                                drop:function(event, ui){
                                                                snapToMiddle(ui.draggable,$(this));
                                                                $(this).droppable('option', 'accept', ui.draggable);
                                                                $(this).css('background-color', 'red');
                                                                },
                                                                out: function(event, ui){
                                                                $(this).droppable('option', 'accept', '.inputs li');
                                                                $(this).css('background-color', '#666');
                                                                }  
                                                                });

                              });

<div class="inputs">
            <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            </ul>                
            </div>
            <br/>
            <table class="spaces">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td class = "hidden"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class = "hidden"></td>
                </tr>
                <tr>
                    <td class = "hidden"></td>
                    <td class = "hidden"></td>
                    <td></td>
                    <td class = "hidden"></td>
                    <td class = "hidden"></td>
                </tr>
            </table>

Answer 1

创建可拖动时使用containment参数。类似的东西：

$(".inputs li").draggable({
 containment: "document"
 ....
});

有关更详细的文档： http://api.jqueryui.com/draggable/#option-containment

使用查询拖动父div之外的元素

1 个答案: