I have this project below.
In it I have a list of images where I can drag and soda as you need. So far it's working properly the way I need it. I need to consider the position of the images as an order, example:
img1 = posição 1
img2 = posição 2
img3 = posição 3 e assim sucessivamente ....
After the user drags and arranges them as he sees fit, I need to get the location of the images to be saved to a database and the next time he accesses the images they are in the position of how he left them saved. / p>
So I need to be able to get these events and save them in php variables so I can save them to mysql, how could I be doing this?
I imagine the result I need would be something like:
img1 = posição 2
img2 = posição 1
img3 = posição 3 e assim sucessivamente ....
/*!
* grabbable
* Version: 1.0.4
*
* Copyright 2016 Wolfgang Kurz
* Released under the MIT license
* https://github.com/WolfgangKurz/grabbable
*/
"use strict";
!function(){
var grabbableStyle = function(){
var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = ".grabbable > * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: -webkit-grab; cursor: grab } "
+ ".grabbable > .grabbable-dummy {"
+ " border: 1px solid #d4d4d4;"
+ " background: repeating-linear-gradient( -45deg, #fff, #fff 4px, #d4d4d4 4px, #d4d4d4 5px );"
+ "}";
document.querySelector("body").appendChild(style);
};
var callCallback = function(elem){
if(document.createEventObject) {
elem.fireEvent("ondragged");
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("dragged", false, true);
elem.dispatchEvent(evt);
}
};
var dummy = null, bg = null;
var createDummy = function(){
bg = document.createElement("div");
bg.style.position = "absolute";
bg.style.width = "1px";
bg.style.height = "1px";
bg.style.overflow = "hidden";
dummy = document.createElement("div");
dummy.className = "grabbable-dummy";
dummy.style.position = "relative";
dummy.addEventListener("drop", function(e){
var data = e.dataTransfer.getData("text");
if(data!="draggable") return;
e.preventDefault();
e.stopPropagation();
while(bg.children.length>0){
var elem = bg.children[0];
this.parentNode.insertBefore(elem, this);
}
dummy.style.display = "none";
callCallback(dummy.parentNode);
});
var x = document.querySelector("body");
x.appendChild(dummy);
x.appendChild(bg);
};
var updateDummy = function(el){
bg.style.left = el.offsetLeft+"px";
bg.style.top = el.offsetTop+"px";
dummy.style.width = el.offsetWidth+"px";
dummy.style.height = el.offsetHeight+"px";
var style = window.getComputedStyle(el);
dummy.style.display = style.display;
dummy.style.margin = style.marginTop+" "+style.marginRight+" "+style.marginBottom+" "+style.marginLeft;
dummy.style.padding = style.paddingTop+" "+style.paddingRight+" "+style.paddingBottom+" "+style.paddingLeft;
};
var initGrabbable = function(){
grabbableStyle();
createDummy();
};
var prevent = function(e){
e.preventDefault();
e.stopPropagation();
};
var allowDrop = function(e){
e.preventDefault();
e.stopPropagation();
if(this.previousElementSibling!=dummy)
this.parentNode.insertBefore(dummy, this);
else
this.parentNode.insertBefore(dummy, this.nextElementSibling);
}
var dragOn = function(e){
e.dataTransfer.setData("text", "draggable");
};
var resetDrop = function(e){
var data = e.dataTransfer.getData("text");
if(data!="draggable") return;
prevent(e);
while(bg.children.length>0){
var elem = bg.children[0];
dummy.parentNode.insertBefore(elem, dummy);
}
dummy.style.display = "none";
callCallback(dummy.parentNode);
};
if(document.readyState=="complete") initGrabbable();
else document.addEventListener("DOMContentLoaded", function(){ initGrabbable() });
HTMLElement.prototype.grabbable = function(){
if( (" "+this.className+" ").indexOf(" grabbable ")<0 )
this.className += " grabbable";
for(var i=0; i<this.children.length; i++){
var el = this.children[i];
if(typeof el.draggabled=="undefined"){
if(el==dummy) continue;
el.draggable = true;
el.addEventListener("dragstart", dragOn);
el.addEventListener("dragover", allowDrop);
el.addEventListener("drag", function(){
if(this.parentNode==bg) return;
if(this==dummy) return;
updateDummy(this);
this.parentNode.insertBefore(dummy, this);
bg.appendChild(this);
});
el.addEventListener("drop", function(e){
prevent(e);
if(document.createEventObject) dummy.fireEvent("ondrop", e);
else dummy.dispatchEvent(new DragEvent(e.type, e));
});
el.draggabled = true;
}
}
if(typeof document.draggabled=="undefined"){
document.addEventListener("dragover", prevent);
document.addEventListener("drop", resetDrop);
document.draggabled = true;
}
};
}()
"use strict";
!function(){
document.querySelector(".grabbable-parent1")
.grabbable();
}() * { box-sizing: border-box }
.box {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 100%;
background-color: #da251d;
}
.listaProduto {
position:relative;
overflow:hidden;
}
.listaProduto figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.listaProduto figure p {
font-family:'Lato';
color:#ffffff;
font-size:30px;
}
.listaProduto figure p {
font-family:'Lato';
font-size:20px;
line-height:18px;
margin:0;
color:#ffffff;
}
.listaProduto figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.listaProduto figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.listaProduto figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.listaProduto figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
} <div class="box grabbable-parent1">
<div class="listaProduto">
<figure>
<img src="https://static.wmobjects.com.br/imgres/arquivos/ids/7837271-344-344/leve-4-pague-3-toalhas-umedecidas-48-unidades-huggies---total-192-unidades.jpg"width="50" height="50">
<figcaption>
<h3>
<p>PRODUTO 01</p>
<p>R$20.00</p>
</h3>
</figcaption>
</figure>
</div>
<div class="listaProduto">
<figure>
<img src="http://supermercadosnogueira.com.br/wp-content/uploads/supermercadosnogueira/2016/10/headerdesk.png"width="50" height="50">
<figcaption>
<h3>
<p>PRODUTO 02</p>
<p>R$20.00</p>
</h3>
</figcaption>
</figure>
</div>
<div class="listaProduto">
<figure>
<img src="http://supermercadosnogueira.com.br/wp-content/uploads/supermercadosnogueira/2016/11/0.3814740014630907401.png"width="50" height="50">
<figcaption>
<h3>
<p>PRODUTO 03</p>
<p>R$30.00</p>
</h3>
</figcaption>
</figure>
</div>
<div class="listaProduto">
<figure>
<img src="http://supermercadosnogueira.com.br/wp-content/uploads/supermercadosnogueira/2016/09/carta-branca.png"width="50" height="50">
<figcaption>
<h3>
<p>PRODUTO 04</p>
<p>R$40.00</p>
</h3>
</figcaption>
</figure>
</div>
<div class="listaProduto">
<figure>
<img src="http://supermercadosnogueira.com.br/wp-content/uploads/supermercadosnogueira/2016/08/04005500073727.jpg"width="50" height="50">
<figcaption>
<h3>
<p>PRODUTO 05</p>
<p>R$50.00</p>
</h3>
</figcaption>
</figure>
</div>
<div class="listaProduto">
<figure>
<img src="http://supermercadosnogueira.com.br/wp-content/uploads/supermercadosnogueira/2016/09/nononono_2000030.jpg"width="50" height="50">
<figcaption>
<h3>
<p>PRODUTO 06</p>
<p>R$60.00</p>
</h3>
</figcaption>
</figure>
</div>
<div class="listaProduto">
<figure>
<img src="http://supermercadosnogueira.com.br/wp-content/uploads/supermercadosnogueira/2016/10/figura-1frente-1.jpg"width="50" height="50">
<figcaption>
<h3>
<p>PRODUTO 07</p>
<p>R$70.00</p>
</h3>
</figcaption>
</figure>
</div>
<div class="listaProduto">
<figure>
<img src="http://supermercadosnogueira.com.br/wp-content/uploads/supermercadosnogueira/2016/10/whiskas-lata-carne-500x500.jpg"width="50" height="50">
<figcaption>
<h3>
<p>PRODUTO 08</p>
<p>R$80.00</p>
</h3>
</figcaption>
</figure>
</div>
<!-- begin snippet: js hide: false console: true babel: false --><div class="listaProduto">
<figure>
<img src="http://www.goiasverde.com.br/produtos-img-alta/molho-de-tomate-bolonhesa-4412.jpg"width="50" height="50">
<figcaption>
<h3>
<p>PRODUTO 09</p>
<p>R$90.00</p>
</h3>
</figcaption>
</figure>
</div>
</div>