Muhafaza içeren sürüklenebilir ve yeniden boyutlandırılabilir div, bir zaman çizelgesi komut dosyasıyla meşgul olmak için

Question

içerikli iş akışının dışında kalıyor, bunun için jQuery'yi sürüklenebilir ve yeniden boyutlandırılabilir kullanmam gerekiyor. ama jsFiddle'ın sürüklenebilir bir ebeveyne sahip olduğunu görebiliyorsunuz, ancak her bir tıklama anından üstte 10 piksel kaldırabilirsiniz. DÜZENLEME: İhtiyacım olan şey konteynerin dışına sürüklenememesi.

 <div class="containment" style="display:block; height:40px; width:150px; background-color:#f2f2f2;"> 
     <div class="baldie" style="display:block; height:40px; width:150px; background-color: rgba(214, 255, 210, .7);"/> 
    </div> 

jQuery::

http://jsfiddle.net/QBX2B/1/

html yardımcı olabilir bir position:relative; için kapsayıcı ekleme

   $('.baldie').resizable({ 
         containment: "parent", 

        }).draggable({ 
         grid: [5,0], 
         containment:"parent", 
         drag: function(event, ui) { 

         } 
        }); 

Answer 1

sorunu çözer.

Ben Kodunuz onay çalıştırmak değiştirdiniz ve bunu kontrol edebilirsiniz: -

<div class="containment" style="position: relative; display:block; height:40px; width:150px; background-color:#f2f2f2;"> 
      <div class="baldie" style="display:block; height:40px; width:150px; background-color: rgba(214, 255, 210, .7);"/> 
     </div> 

Check it: -

Jquery UI resizable issue expands beyond containment (draggable also used)

Answer 2

Inline stil iyi bir uygulama değildir. Dağınık ve bazen okunması zor bir kodla sonuçlanır. Ebeveynin kenar boşluğunu ve dolgularını değiştirmek için CSS kullanmak, çocuğun tüm ebeveyni kapsamalarına izin verebiliriz. Tam olarak lütfen düzgün tanımlamak istediğim şey JSFiddle Solution

.baldie{ 
    display:block; 
    height:40px; 
    width:150px; 
    background-color: rgba(214, 255, 210, .7); 
    margin:1px; 
} 
.containment{ 
    position:relative; 
    display:block; 
    height:40px; 
    width:150px; 
    background-color:#f2f2f2; 
}