Показать положение каждого перетаскиваемого элемента
Хорошо, вот мой код на js fiddle at. Текущий код позволяет мне перемещать объекты и показывает стоп и начальную позицию объекта относительно его ограничения. Что мне нужно сделать, это получить позицию, возвращаемую КАЖДОГО объекта. Мне нужно, чтобы они хранились в разных файлах. Идея в том, что они смогут динамически добавлять новые фигуры, и все эти фигуры будут возвращать туда свои координаты, и я могу позволить им «СОХРАНИТЬ», который будет использовать все эти переменные и AJAX их в базу данных. В настоящее время он возвращает только последний перетаскиваемый объект, как я могу изменить это, чтобы позволить ему показывать положение каждого объекта. Я немного новичок в игре с JQuery / JQueryUI, поэтому любой толчок в правильном направлении полезен.
$( init );
function init() {
$('.square, .round').draggable({
containment: '#layout-area', start: function(event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
$("div#start").text("START: \nX: "+ Startpos.left + "\nY: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
$("div#stop").text("CURRENT: \nX: "+ Stoppos.left + "\nY: " + Stoppos.top);
}
});
}
$(document).ready(function() {
var params = {
// Callback fired on rotation start.
start: function(event, ui) {
},
// Callback fired during rotation.
rotate: function(event, ui) {
},
// Callback fired on rotation end.
stop: function(event, ui) {
},
};
$('#table, #table1, #table2, #table3, #table4, #table5').rotatable(params);
});
Спасибо!
Решение
Вы можете использовать перетаскивание: функция (событие, пользовательский интерфейс), я создал один в моем jsfiddle, проверьте это.
http://jsfiddle.net/Arindamnayak/bcxex133/
<div id="layout-area">
<div id="table" class="square resize"> </div>
<div id="table2" class="square resize"> </div>
<div id="table3" class="round resize"> </div>
<div id="table4" class="round resize"> </div>
<div id="table5" class="square resize"> </div>
<div id="table" class="square resize"> </div>
<div id="table2" class="square resize"> </div>
<div id="table3" class="round resize"> </div>
<div id="table4" class="round resize"> </div>
<div id="table5" class="square resize"> </div>
</div>
<div id="start">Waiting for dragging the image get started...</div>
<div id="start">Waiting for dragging the image get started...</div>
<div id="current">Waiting image getting dropped...</div>
$( init );
function init() {
$('.square, .round').draggable({
containment: '#layout-area', start: function(event, ui) {
// Show start dragged position of image.
var Startpos = $(this).position();
$("div#start").text("START: \nX: "+ Startpos.left + "\nY: " + Startpos.top);
},
drag: function(event, ui){
var Startpos = $(this).position();
$("div#current").text("Current: \nX: "+ Startpos.left + "\nY: " + Startpos.top);
},
// Find position where image is dropped.
stop: function(event, ui) {
// Show dropped position.
var Stoppos = $(this).position();
$("div#stop").text("CURRENT: \nX: "+ Stoppos.left + "\nY: " + Stoppos.top);
}
});
}
$(document).ready(function() {
var params = {
// Callback fired on rotation start.
start: function(event, ui) {
},
// Callback fired during rotation.
rotate: function(event, ui) {
},
// Callback fired on rotation end.
stop: function(event, ui) {
},
drag: function(event, ui){
}
};
$('#table, #table1, #table2, #table3, #table4, #table5').rotatable(params);
});
Другие решения
Других решений пока нет …