Как сохранить позицию перетаскиваемых объектов

HI, Я хочу сохранить позицию сброшенных элементов в базу данных [aspx, javascript]. Пользователь может удалить любое количество элементов, изменить размер и удалить [скрыть], и, наконец, когда они нажмут кнопку "Сохранить", он должен быть сохранен в базе данных. У меня есть код для этого в drop/stop, но он сохранит все упавшие элементы, которые я хочу сохранить только на заключительном этапе. Я думаю, что многие разработчики должны были это сделать, поэтому, пожалуйста, предложите какой-то код.

  $(function() {
      $('#frame img').live('mousemove', function(event) {
          $('#frame img').resizable().parent().draggable();
      });
  });


  $(function() {
      $('#frame img').live('dblclick', function(event) {
          // $(this).resizable("destroy")  not working
          $(this).hide();
          //$(this).unbind("resizable"); not working
          //$(this).removeclass(); not working
      });
  });

  $(document).ready(function() {
      //Counter
      counter = 0;

      //Make element draggable
      $("img").draggable({
          helper: 'clone',
          containment: '#frame',

          //When first dragged
          stop: function(ev, ui) {
              var pos = $(ui.helper).offset();
              objName = "#clonediv" + counter
              $(objName).css({ "left": pos.left, "top": pos.top });

              $(objName).removeClass("drag");
              //When an existiung object is dragged
              $(objName).draggable({
                  containment: 'parent',
                  stop: function(ev, ui) {
                      var pos = $(ui.helper).offset();
                  }
              });
          }
      });

      //Make element droppable
      $("#frame").droppable({

          drop: function(ev, ui) {

              if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
                  var pos = $(ui.helper).offset();

                  counter++;
                  var element = $(ui.helper).clone();

                  //var element = element1.resizable();
                  element.addClass("tempclass");
                  $(this).append(element);
                  $(".tempclass").attr("id", "clonediv" + counter);
                  //$(".tempclass").attr("onclick",function(){ $(this).remove(););
                  $("#clonediv" + counter).removeClass("tempclass");
                  //Get the dynamically item id
                  draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
                  itemDragged = "dragged" + RegExp.$1
                  //console.log(itemDragged)
                  //alert('left' + pos.left + ',top' + pos.top + 'of item' + itemDragged);
                  $("#clonediv" + counter).addClass(itemDragged);
              }
          }
      });
      //Make the element resizable


  });

Пожалуйста, поправьте меня, если что-то не так. Спасибо заранее

Ответы

Ответ 1

Предполагая, что ваши элементы являются элементами списка под списком с идентификатором items.

JQuery

var locations = [];

$('#items li').each(function(i) {

    locations[i] = {
        x: $(this).offset().left,
        y: $(this).offset().top
    };

});

Затем отправьте это на сервер. Не зная больше деталей, я не могу быть на 100% уверенным, если это все, что требуется.

На загрузке страницы просто проведите петлю через местоположения и добавьте атрибут к вашему li, например (предполагая PHP)

HTML/PHP

<ul id="items">
<?php foreach($items as $item): ?>
<li style="left: <?php echo $item['x']; ?>px; top: <?php echo $item['x']; ?>px">item</li>
<?php endforeach; ?>
</ul>

конечно, вам также может понадобиться

CSS

#items {
    position: relative;
}

#items li {
    position: absolute;
}

Ответ 2

Один из способов может заключаться в том, чтобы поместить координаты при перетаскивании в скрытое поле, которое затем можно прочитать в коде позади и сохранить в db.

При повторной визуализации страницы вам также нужно будет заполнить поле и использовать javascript для размещения объектов на своих местах.

Кроме того, может быть полезно указать, какой код используется для языка. С#, PHP, Java, Что?

Ответ 3

Основываясь на вашем ответе на вопрос выше:

"Я хочу сохранить изображения в div2 в базу данных. См. приведенный выше код"

Кажется, что все, что вам нужно сделать, это остановить, получить дочерние элементы div2.

jQuery будет...

var x = "";
$("#div2").children("img").each(function(){
  x = x + "; " + $(this).attr("src");
});

это вернет строку с разделителями с запятой из всех img srcs в div2.

Ответ 5

Я однажды сделал это для одного из моих проектов класса. Поскольку у меня было только одно недельное время для реализации, это была не очень хорошая реализация. То, как я делал это, когда пользователь перетаскивает и падает, я получил окончательный x.location и y.location из javascript и позвонил в asmx-службу, где я отправлю (x, y). В файле asmx я написал код, чтобы сохранить его в базе данных.

Ответ 6

Итак, вы не хотите сохранять их до конца?

Вы добавляете клон в #frame при удалении, в этот момент дайте ему класс, чтобы указать его сброшенный элемент. Я бы поставил ссылку на объект intial в 'ref' attr вместо класса.

Droppable

$("#frame").droppable({
    drop: function(ev, ui) {

        if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
            var pos = $(ui.helper).offset();

            counter++;
            var element = $(ui.helper).clone();

            $(this).append(element);
            element.attr("id", "clonediv" + counter);

            // Get the dynamic item id
            draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
            itemDragged = "dragged" + RegExp.$1

            element.attr('ref', itemDragged);
        }
    }
});

Метод щелчка должен быть похож на (при условии, что одна запись сохраняется для всех сброшенных элементов (x, y, ширина, высота, исходный идентификатор объекта)):

OnClick

$("#saveDrops").click(function () {
    var dObjects = [];
    $.each('#frame .droppedClass', function(i) {
        dObjects[i] = {
            x: $(this).offset().left,
            y: $(this).offset().top,
            height: $(this).width(),
            width: $(this).height(),
            identifier: $(this).attr('ref');
        }
    });

    $.post('savemystuff.aspx', dObjects, function(data){
        // Do something with the results
    });
});