Jquery - перетаскиваемые разрывы после замены изображения

#jquery #jquery-ui

#jquery #jquery-пользовательский интерфейс

Вопрос:

Я использую Jquery и jQueryUI для:

У меня есть <img> , который содержит изображение
На этом изображении есть кнопка редактирования, которая позволяет изменить его положение (перенос переполнения div: скрытый), а затем пользователь может нажать «Отмена» или «Сохранить», чтобы отправить AJAX-вызов с конечной позицией «сохранение относительной обрезки изображения» (думаю, facebook изображение профиля с помощью большого пальца селектор работает)
У пользователя также есть список опций из ~ 8 изображений (аналогичный тому, как Twitter меняет фон из образцов), из которых он / она может выбрать. При щелчке изображение в <img> теге заменяется на то, на которое нажал пользователь, и позиция сбрасывается на top: 0px, leftpx;

Все это работает отлично.

НО если изображение УЖЕ перетаскивалось — тогда другое изображение после замены перетаскивать нельзя. В inspect element — код обновляется с правильными верхними и левыми координатами и добавляет правильные классы — но изображение не перемещается.

Если код был бы полезен — я могу предоставить это.

ОТРЕДАКТИРУЙТЕ ** Код ниже

id=image_slice_wrapper скрывает переполнение с фиксированными размерами. имеет src при загрузке страницы слева и сверху из базы данных (сохранено)

 <div id="image_slice_wrapper">
<img id="draggable" class="slice_img ui-draggable" style="position:relative; left:-1000px; top:-250px" src="images/ducati.jpg"/>
</div>

Отредактируйте скрипт кнопки, чтобы сделать Div перетаскиваемым (удалены дополнительные элементы стиля)

 $("#edit_button").click(function() {
$( ".slice_img" ).draggable({ disabled: false, drag: function(){                        
$(".slice_img").css("cursor","move");   
});

Кнопка сохранения для резервной копии div (удален AJAX и стиль)

 $("#save_button").click(function() {
$('.slice_img').draggable( "option", "disabled", true );
});

Сценарий замены Img (slice_thumb — это предварительный просмотр изображения для запуска замены)

 $(".slice_thumb").click(function() {
var new_image = $(this).find("img").attr("src");
$(".slice_img").attr("src",new_image);   
$(".slice_img").attr("style","left:0px; top:0px;");
});

Итак, еще раз: если я перетаскиваю изображение. А затем замените это изображение другим изображением. Новое изображение не поддается перетаскиванию. Однако я все еще вижу, что верхний и левый стили меняются, а к элементу добавляются правильные классы.

1. Код всегда полезен .. jsfiddle. net еще лучше. Первая мысль, однако, вы привязываетесь к событиям, используя live?

2. @Todd не уверен, что означает «использовать live». Не могли бы вы пояснить?

3. Посмотрите на документы jQuery для «живого» метода ( api.jquery.com/live ). Используется для автоматической повторной привязки событий к динамически генерируемым объектам.

Ответ №1:

Решена моя проблема. Все еще не очевидно, почему это работает.

Я изменил сценарий замены изображения на:

 $(".slice_thumb").click(function() {
    var src = $(this).find("img").attr("src");
    $(".slice_img").attr("style","left:0px; top:0px;");
    $("#draggable").after('<img src=" " />').attr("src", src).addClass("slice_img ui-draggable").attr("style","position:relative; left:0px; top:0px").attr("id","draggable");
});

Это фактически заменяет img src (как это делалось раньше), но также создает пустое изображение после <img src="_"> . И по какой-то причине jquery это нравится. Новое изображение можно перетаскивать в коде (я вижу изменение положения) — и его можно заметно перетаскивать в DOM. Круто!