Хобрук: Ваш путь к мастерству в программировании

Запись выбора jQuery Drag & Drop в переменные PHP

Я реализовал изображение Drag an Drop, как показано в следующем примере: http://jqueryui.com/droppable/#photo-manager. Я добавил идентификаторы для каждого элемента изображения, чтобы я мог создать список элементов в корзине и еще один для тех, которые остались нетронутыми.

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

Начальная галерея UL (перетаскиваемый) Элемент изображения с идентификатором, например:

  <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
    <li class="ui-widget-content ui-corner-tr">
      <img src="img/gler.png" alt="lake" width="96" height="32" id="2">
      <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
    </li>
  </ul>

Корзина DIV (выпадающая)

  <div id="trash" class="ui-widget-content ui-state-default">
 <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span>       Trash</h4>
  </div>
php drag-and-drop jquery-ui jquery-ui-draggable jquery-ui-droppable
28.01.2014

Ответы:


1

Используя javascript, вам нужно создать массив идентификаторов в каждом контейнере следующим образом:

var selected = [],
    unselected = [];
$('#gallery img').each(function(){
    selected.push($(this.attr('id'));
});
$('#trash img').each(function(){
    unselected.push($(this.attr('id'));
});

Вы можете инициировать это действие, используя событие, например, после каждого сброса или когда пользователь нажимает кнопку «Готово» и т. д. Теперь передайте эти массивы на сервер, как вам нравится (обновите страницу или вызов ajax).

28.01.2014
  • Привет, Joe42, я здесь заблудился... Я объявил свой скрипт, например: <script type='text/javascript'> $(document).ready(function(){ $('#MyButton').click(function(){ var selected = [], unselected = []; $('#gallery img').each(function(){ selected.push($(this.attr('id')); }); $('#trash img').each(function(){ unselected.push($(this.attr('id')); }); }); }); </script> И кнопку типа: <input type="button" value="Capacity Chart" id="MyButton" > Если это нормально, не могли бы вы помочь мне с передачей массивов в строки? Заранее спасибо и извините, что так много прошу. 28.01.2014
    • Новые материалы
    Еженедельный выпуск React 75
    Добро пожаловать в 75-й выпуск React Weekly, еженедельный обзор последних ссылок и руководств по React и React Native. Посетите Купить кофе , чтобы найти способы поддержать React Weekly, или..
    (Почти) полнофункциональная реализация Gumbel MuZero в Джулии.
    TLDR; Gumbel Muzero — это современный алгоритм обучения с подкреплением. Он достиг сверхчеловеческой производительности во многих настольных играх и даже, что более впечатляюще, в Atari..
    Передача нейронного стиля в браузерах с использованием Angular и WebDNN
    В последние годы глубокое обучение привлекло большое внимание из-за его безупречной производительности при обучении на обширных данных и высокой точности при выводе. Развертывание этих алгоритмов..
    Шифр Цезаря в C
    Шифр Цезаря  — один из самых простых и широко известных методов шифрования. Он включает в себя сдвиг каждой буквы в сообщении на определенное количество позиций в алфавите. В этой статье мы..
    Исследовательский анализ данных (EDA)
    Что такое ЭДА? Анализ данных, который ищет закономерности в данных, известен как исследовательский анализ данных. Это похоже на беглый просмотр данных, чтобы найти наиболее важные..
    1x1 Convolution: демистификация
    Чтобы пролить свет на концепцию операции свертки 1x1, которая представлена ​​в статье «Сеть в сети» Лин и др. и Google Inception Некоторое время назад я прочитал статью «Сеть в сети» (NiN),..
    Лучшие расширения VS Code в 2022 году
    Код ВС Лучшие расширения VS Code в 2022 году Список самых полезных расширений VS Code, которые вы можете использовать как разработчик в 2022 году Расширения находятся на рынке VS Code,..