0

私はこの問題を解決する方法を探していましたが、まだ解決策を見つけていません。ドラッグ可能な要素を含むスクロール可能な領域内にリストがあります。親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>
4

1 に答える 1

0

containmentドラッグ可能なものを作成するときに引数を使用します。何かのようなもの：

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

詳細なドキュメントについては、http： //api.jqueryui.com/draggable/#option-containmentをご覧ください。

于 2013-01-20T19:53:24.573 に答える