製作可拖動div的div溢出

在按鈕上單擊事件我能夠使用jQuery UI生成可拖動的div。我可以將新創建的div拖入容器div class=」 middle-side」中。現在，可拖動的div被固定，以留在設置到容器的空間內。我想給它更多的拖拽空間，但保留容器的初始高度和寬度邊界。我怎麼能如下：如果我繼續拖動div一直到右側的容器div滾動。 JSFIDDLE 製作可拖動div的div溢出

jQuery的

var z = 1; 
$('#button').click(function (e) { 
    /** Make div draggable **/ 
    $('<div />', { 
     class: 'draggable ui-widget-content', 
     html: '<span class="close">[X]</span><span class="text">' + $('textarea').val() + '</span>', 
     appendTo: '.middle-side', 
     draggable: { 
      containment: 'parent', 
      start: function(event, ui) { 
       $(this).css('z-index', ++z); 
      } 
     } 
    }).addClass('placement'); 
});

CSS

.middle-side { 
    width: 500px; 
    height: 500px; 
    border: 2px solid; 
} 
.draggable { 
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    background:#FFFFDD; 
    position: relative; 
    z-index: 1; 
} 

.placement { 
    border: 2px dashed #000; 
}

HTML

<textarea rows="4" cols="50" placeholder="Enter Text Here!"></textarea> 
<br/> 
<input type="button" id="button" value="Add Div with Text" /> 
<br/> 
<div> 
    <div class="middle-side empty"></div> 

</div>

來源

2014-09-02 Code_Ed_Student

你能解釋一下更多關於你想要完成的事情嗎？ – fernandopasik 2014-09-02 05:16:11

@fernandopasik一個例子，如果我繼續拖動div一直到右側的容器div滾動。 – 2014-09-02 05:17:34

這是預期的行爲：

http://jsfiddle.net/0wbnud4k/49/

我放了一箇中間更大的div，並讓你的容器滾動。

<div class="middle-side"> 
    <div class="droppable"></div> 
</div>

此外，一切都追加到內部div和對象的位置絕對和相對於內部div。

.middle-side { 
    width: 500px; 
    height: 500px; 
    border: 2px solid; 
    overflow: scroll; 
} 

.droppable { 
    width: 2000px; 
    height: 2000px; 
    position: relative; 
} 

.draggable { 
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    background:#FFFFDD; 
    position: absolute; 
    z-index: 1; 
} 

.placement { 
    border: 2px dashed #000; 
}

來源

2014-09-02 05:27:52 fernandopasik

製作可拖動div的div溢出

回答

相關問題