2

Eu tenho esse projeto abaixo.

Nele eu tenho uma lista de imagens onde posso arrastar e sotar da forma que precisar. Até ai esta funcionando corretamente da forma que preciso. Preciso considerar a posição das imagens como uma ordem, exemplo:

img1 = posição 1
img2 = posição 2
img3 = posição 3 e assim sucessivamente ....

Após o usário arrastar e organizar da forma que ele achar melhor,preciso pegar a localização das imagens para que seja salva em um banco de dados e da próxima vez que ele acessar as imagens estarem na posição de como ele deixou salvo.

Ou seja preciso conseguir pegar esses eventos e salvar em variáveis do php para que possa salvar no mysql, como poderia estar fazendo isso ?

Imagino que o resultado que preciso seria algo como:

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>
2
  • sim,tenta atribuir um id unico a cada produto, depois guardas o id num array a cada evento que utilizador executar, e depois faz uma requisição ajax para guardares o array , e ja guarda pela ordem que o utilizador escolheu
    – 13dev
    5/08/2017 às 18:13
  • Não seria melhor guardar num localStorage em vez de banco de dados? Assim não precisaria de requisições ao servidor nem de banco de dados.
    – Meu ovo
    26/02/2019 às 17:33

1 Resposta 1

1
+50

Em um projeto faço exatamento o que tu quer vou mostrar:

 $(".draggable").each( function(elem) {

   $(this).draggable({

    appendTo:'body',
    scroll:true,
    containment: 'window',
    revert: "invalid",
    helper: "clone",
    stop: function(){
var ind= $(this).attr("indimg");
var top = $(this).css('top');
var left = $(this).css('left');
var width1 = parseInt($(this).css('width'));
var height1 = parseInt($(this).css('height'));
var pagina = "<?= $_GET['pagina'] ?>";
var position = [ind,top,left,width1,height1,pagina];
}
});

No momento que é solto o elemento tu pega todas as informações dele, essas informações tu pode passar para uma pagina php que salvara no banco atraves de ajax

$.ajax({
    type:"POST",
    asynnc: true,
    url:"salvabanco.php",
   data:"posicao="+position,
    dataType: "json",
    success:function(data){
    }
});

mais sobre o json e ajax caso precise: https://secure.php.net/manual/pt_BR/book.json.php http://api.jquery.com/jquery.ajax/

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .