Остановить перетаскивание в точке

Question

Я создаю обложку для моего проекта php. Я хочу сделать это как Facebook. Я могу загрузить обложку большего размера, чем желаемый размер обложки, тогда я хочу перетащить крышку вверх-вниз-влево-вправо, чтобы позволить пользователю повторно установить ее и установить в соответствии с ним. При этом движении я могу перетащить фотографию, но хочу прекратить перетаскивание, если изображение заканчивается. Подобно тому, как пользователь перетаскивает изображение влево, изображение должно автоматически останавливать перетаскивание, если конечная точка div соответствует конечной точке div. Я не получаю надлежащего предложения, чтобы описать это. Я загрузив скрипку, которая покажет, что я хотел, я не хочу, чтобы показать белый фон (может это предложение объясняет пример)

Demo скрипки: http://jsfiddle.net/keshu/HC927/1/

$(document).ready(function(){ 
    $(".cover_image").draggable(); 
});  

Answer 1

Вы используете опцию containment и проверить его поддерживать изображение внутри своих границ, она позволяет:

Сдерживает перетаскивание в пределах указанного элемента или области.

Несколько типов поддерживаются:

Selector: перетаскиваемый элемент будет содержаться в ограничительной рамку первого элемента, найденного селектор. Если ни один элемент не найден, ограничение не будет установлено.

Элемент: Перетаскиваемый элемент будет содержаться в ограничивающей рамке этого элемента. Строка: Возможные значения: «родительский», «документ», «окно».

Array: Массив, определяющий ограничивающий прямоугольник в форме [x1, y1, x2, y2].

Код:

$(document).ready(function() { 
    $(".cover_image").draggable({ 
     containment: [ 
     $(window).width() - $(".cover_image").width(), 
     $(window).height() - $(".cover_image").height(), 
     0, 
     0] 
    }); 
}); 

Демо: http://jsfiddle.net/8ZBPA/