如何仅检索可拖动元素的最后位置?

时间:2019-04-26 22:54:08

标签: jquery jquery-ui jquery-ui-draggable

我有这个可拖动元素

$(function() {
   var positions = {};
    c = 0;

  $("#draggable, #draggable2").draggable({

    helper: 'clone',
    appendTo: "#droppable",
    // drop : function() { 
    //     $(this).css('margin-top', '30px');
    //   }
  });


  $("#droppable").droppable({
    accept: "#draggable, #draggable2",


    drop: function(e, ui) {
      c++;
      var $obj = ui.helper.clone().attr('id', 'benchdropped' + c).draggable({
        stop : function (event, ui) {
            positions[this.id] = ui.position;
            console.log('positions', positions);
            // console.log(Object.keys(positions)); //ids for benches - to be used in node.
            $('#save').click(function() {

                        var token =  $('input[name="_csrf"]').attr('value')
                        $.ajaxSetup({
                            beforeSend: function(xhr) {
                                xhr.setRequestHeader('X-CSRF-Token', token);
                            }
                        });
                        console.log('positions in ajax',positions)            
                        $.ajax({

                            url: '/savelayout',
                            type: 'POST',
                            dataType: "json",

                            data: positions,
                            // success:function(data) {
                            //     alert('done');
                            // },

                        });
                    })
            }

      });
      // console.log(Object.keys(pos))
      $obj.css({
        // // position: 'absolute',
        // top: pos.top + "px",
        // left: pos.left + "px",
        marginTop: "0px",
        marginLeft: "0px",

      }).rotatable( {
        snap:".chart-area"}).draggable({ //make it draggable

        // snap: true,
        // grid: [ 20, 20 ],
        appendTo: "#droppable",
        containment: ".chart-area",
        position: 'absolute',
        scroll: true,


      }).appendTo(this);
      // $obj.draggable({
      //    start: function (event, ui) {
      //       pos[this.id] = ui.position;
      //       localStorage.pos = JSON.stringify(pos);
      //       }
      // })

      $obj.appendTo("#droppable");


    }

  });
});

一旦放下它,我便得到了所需的值,但是,当我再次拖动它时,又创建了一个带有新坐标的“位置”。

查看此: enter image description here

我要尝试做的是创建,更新它们。用新坐标更新的第一个“位置”。 此时,当我将其发布到MongoDB时,我得到了我不需要的所有“位置”,而且我不知道该如何摆脱。谢谢!

0 个答案:

没有答案