我有这个可拖动元素
$(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");
}
});
});
一旦放下它,我便得到了所需的值,但是,当我再次拖动它时,又创建了一个带有新坐标的“位置”。
我要尝试做的是创建,更新它们。用新坐标更新的第一个“位置”。 此时,当我将其发布到MongoDB时,我得到了我不需要的所有“位置”,而且我不知道该如何摆脱。谢谢!