Reset images position with saved coordinates using jQuery Draggable
I implemented draggable imag开发者_如何转开发e using jQuery-ui Draggable and saved coordinates into database.
Now I am getting coordinates and images url in xml format.
I want to reset the image position. where it was saved.
============= Here is source code:=============
$.ajax({
type: "GET",
url: "devices.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('device').each(function(){
var idText = $(this).attr('id');
var longAddress = $(this).find('longAddress').text();
var imgSrc = $(this).find('type').text();
var xAxis = $(this).find('x-axis').text();
var yAxis = $(this).find('y-axis').text();
var oNewImg = document.createElement('img');
oNewImg.id = idText;
oNewImg.src = imgSrc;
document.body.appendChild(oNewImg);
var originalLeft = parseInt($('#'+oNewImg.id).position().left);
$('#'+oNewImg.id).css('left', (xAxis) + 'px');
$('#'+oNewImg.id).css('top', (yAxis) + 'px');});
This might sound funny, but why don't you do it? Query the database and for each image output:
<div class="container">
<?php
// SQL query
$buffer = mysql_query($q);
while($v = mysql_fetch_assoc($buffer)) {
echo '<img src="'.$v['url'].'" style="top: '.$v['top'].'px; left: '.$v['left'].'px" />';
}
?>
</div>
<style>
.container {
width: 100%;
height: 100%;
position: relative;
}
.container img {
position: relative;
}
</style>
If you got the jQuery part, and storing the images locations in the db, I don't see how you could have problems displaying them...
This might helps all who are looking for a JqueryUI draggable with reset to original position on a button click either vertical-align or horizontal align. Fiddle
https://jsfiddle.net/JunaidAli/wp1n796q/321
精彩评论