Сделайте Изображения, Загруженные через Плагин JqueryFileUpload, Перетаскиваемый и Опускаемый к определенному местоположению div

Question

Сделайте Изображения, Загруженные через Плагин JqueryFileUpload, Перетаскиваемый и Опускаемый к определенному местоположению div

0

Я использую этот плагин для загрузки нескольких файлов изображений.

http://blueimp.github.io/jQuery-File-Upload/

Моя проблема заключается в том, что после загрузки изображений мне нужно сделать перетаскивание изображений и отбросить их в другое место, скажем, div с id = "dropHere", который будет на одной странице.

Я пытался использовать jquery ui dragndrop, но не работал.

После загрузки изображения, следующего за html

<table class="table table-striped" role="presentation">
    <tbody class="files">
        <tr class="template-download fade in">
            <td>
                <span class="preview draggable">
                    <a data-gallery="" download="Koala.jpg" title="Koala.jpg" href="http://localhost/Testing/server/php/files/Koala.jpg">
                        <img src="http://localhost/Testing/server/php/files/Koala.jpg">
                    </a>
                </span>
            </td>
        </tr>
        .
        .
        .
        .
        so on
    </tbody>
</table>

поэтому я добавил следующий скрипт, чтобы сделать его перетаскиваемым

 <script>
$(function() {
$( ".draggable" ).draggable();
});
</script>

Но ничего не происходит, но когда я пытаюсь это сделать на каких-либо других элементах, draggable работает, я думаю, возможно, какой-то конфликт происходит, но я не могу узнать, что это такое...

Пожалуйста, направляйте меня в правильном направлении, чтобы это работало.

Thankz.

Scrappy Cocco 12 дек. 2013, в 08:48

Источник

Теги:

jquery

jquery-ui

jquery-file-upload

1 ответ

Ещё вопросы

Fractaliste · Accepted Answer · 2013-12-15T13-14-00.000Z

экспликация

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

Фрактальное решение

Возможно, вы можете добавить эту строку в конце вашего обратного вызова, предоставленного jquery-file-upload, чтобы зарегистрировать событие перетаскивания в живом содержимом:

$(".draggable[class!='ui-draggable']").draggable();

Основной скрипт

Лоскутное решение Coco

$(document).on('mouseover', ".draggable", function(e) { $(this).draggable(); });

Правильно сказано, проблема была в том, что изначально изображения показывались по запросу ajax, поэтому мой код не влияет на это ... так как мой скрипт был выполнен, когда страница готова. Спасибо, что указали мне в правильном направлении. Я также пришел с альтернативным решением, как указано ниже. $ (document) .on ('mouseover', ".draggable", function (e) {$ (this) .draggable ();});