Search jQuery

jQuery Forum

kiara.ali..

Save position of draggable item

in Getting Started • 6 years ago

Hi there,

I have looked through these threads and can see this question has been asked before, however i am unsure how to implement the answers to exactly what i need.

Here is the link to what i have so far: http://mereton.com/dragtest/drag.html

When users of my site drag the items around, and then refresh or leave and return to the page, i would like those items to remain in the same place.

Is this possible and if so, as i am a bit of a newbie i would really appreciate to know how to apply it to my current code

Thanks in advance

Replies(13)

jakecigar

Re: Save position of draggable item

6 years ago

Take a look at http://jsfiddle.net/jakecigar/v685v9t6/ <--

var sPositions = localStorage.positions || "{}",
positions = JSON.parse(sPositions);
$.each(positions, function (id, pos) {
$("#" + id).css(pos)
})
$("#draggable3").draggable({
containment: "#containment-wrapper",
scroll: false,
stop: function (event, ui) {
positions[this.id] = ui.position
localStorage.positions = JSON.stringify(positions)
}
});

JΛ̊KE

kiara.ali..

Re: Save position of draggable item

6 years ago

Thank you very much for your reply!

Please excuse me if this seems incredibly stupid!!

It works perfectly on JSFIDDLE, however when I implement that code onto my site it doesn't work...

Is there a particular place in my code I should be placing this additional code?

jakecigar

Re: Save position of draggable item

6 years ago

You could put the <script> at the end of the <body> or put it in the head, surrounded by $(function(){…}).

It has to wait for the DOM to be ready.

$(function(){

var sPositions = localStorage.positions || "{}",

positions = JSON.parse(sPositions);

$.each(positions, function (id, pos) {

$("#" + id).css(pos)

})

$("#draggable3").draggable({

containment: "#containment-wrapper",

scroll: false,

stop: function (event, ui) {

positions[this.id] = ui.position

localStorage.positions = JSON.stringify(positions)

}

});

});

</script>

JΛ̊KE

kiara.ali..

Re: Save position of draggable item

6 years ago

Thank you so much i got it to work!

Now i am a bit confused about how to get it to work making multiple elements draggable.

I understand with this code, i would then create new divs with new IDs such as draggable4 and draggable5 however how would i make it work with the following code from OpenCart:

<?php foreach ($products as $product) { ?>

<?php if ($product['thumb']) { ?>

<a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product

['name']; ?>" title="<?php echo $product['name']; ?>" class="img-thumbnail" /></a> <BR> <a href="<?php echo $product['href'];

?>"><?php echo $product['name']; ?></a>

The above code dictates that if there is an item in my shopping cart to display the thumbnail, and i would like for those thumbnails to be able to be dragged around

Every time i try and place the drag code into this page, it works except only the 1st thumbnail that appears becomes draggable

Would anybody know how to make it so that each thumbnail can be dragged around?

jakecigar

Re: Save position of draggable item

6 years ago

My code saves the position of any draggable item with a unique id attribute.

I’m not even going to try to interpret your PHP. If you share some HTML or a link to a demo page, we can take a look.

Take the fiddle and add your real life generated HTML and see if it works.

JΛ̊KE

kiara.ali..

Re: Save position of draggable item

6 years ago

Thank you Jakecigar for all of your help so far!

Your original answer is fantastic and has helped me so much!

My trouble is that only the 1st DIV ever saves the position that i move it to as my PHP code i contain within the DIV belongs to a cart script and creates many copies of the same DIV, and results in only the first one being able to save position.

I had the same issue with the dragging script, so i then changed it to reference a CLASS so all items now drag within the class rather than each DIV ID being draggable.

My question is, is there any way you are able to adjust the code you have suggested for me to relate to a CLASS called "draggable" rather than the DIV ID "draggable" so that i can make all the newly duplicated DIVs save position as well?

Below is the relevant parts of my current code including your suggestion:

<link rel="stylesheet" href="http://mereton.com/2015b/catalog/view/theme/default/template/checkout/js/jquery-uidrag.css">
<script src="http://mereton.com/2015b/catalog/view/theme/default/template/checkout/js/jquery-uidrag.js"></script>
<link rel="stylesheet" href="http://mereton.com/2015b/catalog/view/theme/default/template/checkout/js/dragstyle.css">
<style>
.draggable { width: 200px; height: 200px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#draggable, #draggable2 { margin-bottom:20px; }
#draggable { cursor: move; }
#draggable2 { cursor: e-resize; }
#containment-wrapper { width: 800px; height:800px; border:2px solid #ccc; padding: 10px; }
h3 { clear: left; }
</style>
<style>
.draggable { width: 200px; height: 200px; padding: 0.5em; }
</style>
<script>
$(function() {
$("[id=draggable]").draggable()
});
</script>
</head>
<body>
<script>
$(function(){
var sPositions = localStorage.positions || "{}",
positions = JSON.parse(sPositions);
$.each(positions, function (id, pos) {
$("#" + id).css(pos)
})
$("#draggable").draggable({
containment: "#containment-wrapper",
scroll: false,
stop: function (event, ui) {
positions[this.id] = ui.position
localStorage.positions = JSON.stringify(positions)
}
});
});
</script>
<div id="containment-wrapper">
<div id="draggable" class="ui-widget-content draggable"">
PHP ITEMS ARE USUALLY HERE
</div>
</div>

jakecigar

Re: Save position of draggable item

6 years ago

Take the fiddle and add your real life generated HTML and see if it works.

JΛ̊KE

kiara.ali..

Re: Save position of draggable item

6 years ago

Here is the JSFIDDLE

https://jsfiddle.net/v685v9t6/24/

If you move both boxes around and will notice that when you refresh the page, only one remains in place, the other does not.

I understand that this is because both of my DIVs have the same ID being "Draggable" but as i mentioned previously my PHP code within each DIV creates duplicates of the same DIV with the same ID so i was wondering if there is a way to alter the script to refer to the CLASS rather than the DIV ID to save the positions?

jakecigar