How to take the events of a drag and move to php variables

Question

How to take the events of a drag and move to php variables

Asked 6 years, 11 months ago

Viewed 168 times

2

I have this project below.

In it I have a list of images where I can drag and bury as I 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 in the way he thinks best, I need to get the location of the images to be saved in a database and the next time he accesses the images to be in the position of how he saved them.

In other words, you need to be able to take these events and save them to php variables so you can save them to mysql, as you might be doing ?

I imagine the result I’d 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>

yes, try to assign a unique id to each product, then save the id in an array to each event you run, and then make an ajax request to store the array, and it already stores in the order you chose

– 13dev

2017/08/05 at 18:13
Wouldn’t it be better to store in a Torage location instead of a database? Then you wouldn’t need server requests or a database.

– Sam

2019/02/26 at 17:33

1 answer

Browser other questions tagged php javascript mysql css3 drag-n-drop

You are not signed in. Login or sign up in order to post.

by Gabriella Selbach • **436** points · Answer 1 · 2019-02-27T02:44:21+00:00

In a project I do exactly what you want I’ll show:

 $(".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];
}
});

The moment the element is released you take all the information from it, this information you can pass to a php page that you saved in the bank through ajax

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

more about json and ajax if you need to: https://secure.php.net/manual/en/book.json.php http://api.jquery.com/jquery.ajax/