Drag DIV внутри сНа (ребенок> родителем)

Question

Я пробовал много вещей, но я не могу получить его работу:

У меня есть DIV внутри DIV, и хочет ребенок (= внутренние дела) будет перетаскиваемый только внутри родителя. Дело в том, что ребенок больше родителя, и каждый раз, когда я хочу перетащить ребенка в родительском, он всегда защелкивается сразу на стороне родителя, потому что он не подходит.

Любое решение оценено !!

Вот проект:

http://jsfiddle.net/yc5f9ym6/

И вот что я хочу сделать:

http://jsfiddle.net/WBv9r/1/light

HTML

<div class="nhood"> 
     <div class="image"></div> 
    </div> 


</div> 

CSS

.image { 
    width: 600px; 
    height: 600px; 
    border: solid 5px black; 
    background: green; 
    cursor:move; 
} 



.nhood { 
    margin: 100px auto 0 auto; 
    overflow: hidden; 
    width: 400px; 
    height: 400px; 
    position: relative; 
} 

JS

$(".image").draggable(
    { 
     containment: ".nhood" 
    }); 

Спасибо!

Уточнение: Ребенок должен иметь те же границы, что и границы родителей.

Answer 1

Теперь вы даете понять, что вам нужно, чтобы изменить параметр containment.

Вы должны использовать опцию массива, а также определить размер коробки к где перетаскиваемым можно перемещать:

var draggable = $('.image'); 
var viewport = $('.nhood'); 
var viewportOffset = viewport.offset(); 
var box = 
    { 
     x1: viewportOffset.left + (viewport.outerWidth() - draggable.outerWidth()), 
     y1: viewportOffset.top + (viewport.outerHeight() - draggable.outerHeight()), 
     x2: viewportOffset.left, 
     y2: viewportOffset.top 
    }; 

$(".image").draggable(
     { 
      containment: [box.x1, box.y1, box.x2, box.y2 ] 
     }); 

http://jsfiddle.net/yc5f9ym6/5/

Хитрость заключается в координатах коробки, обратите внимание x1 и y1 являются текущая позиция минус пространство, необходимое для отображения нижнего или правого краев дочернего элемента в родительском.