Drag and Drop - page

1

Well, I'm facing two little problems. When I drag the drag, it is not inserting in the part that is to be inserted. It sits on top. Another thing is also just taking a div, and in my while it was to get all the results in the div and be the same as all.

Thank you in advance.

<?php   
 //index.php  
 session_start();  
 $connect = mysqli_connect("localhost", "", "", "");  
 ?> 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <title>Carrinho Konika</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><linkhref="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css" rel="stylesheet">
    <link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
  <style>
    /* Set height of the grid so .sidenav can be 100% (adjust if needed) */
    .row.content {height: 1500px}
    
    /* Set gray background color and 100% height */
    .sidenav {
      background-color: #f1f1f1;
      height: 100%;
    }
    
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
    
    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height: auto;} 
    }
	           .product_drag_area{  
                width:300px;  
                height:120px;  
                border:2px dashed #ccc;  
                color:#ccc;  
                line-height:100px;  
                text-align:center;  
                font-size:24px;  
           }  
           .product_drag_over{  
                color:#000;  
                border-color:#000;  
           } 
		   .divflu {
    top: 25px; /* altura que vai parar antes do topo */
    position: sticky;
}
.divflu2 {
    margin-top: 140px; /* altura que está do topo */
    top: 50px; /* altura que vai parar antes do topo */
    position: sticky;
}
  </style>
</head>
<body>

<div class="container-fluid">
  <div class="row content">
    <div  class="col-sm-4 sidenav">
		        <div class="divflu" align="center"> 
			    <h4>Detalhe do(s) produto(s)</h4>						   
                <div class="product_drag_area">Arraste seu produto aqui</div> 
				<div style="clear:both"></div>  <br />    
                <div id="dragable_product_order">  </div>				
                </div>	
    </div>

      <h3 align="center">Faça seu orçamento aqui</h3><br />  
                <?php  
                $query = "SELECT * FROM tbl_product ORDER BY id ASC";  
                $result = mysqli_query($connect, $query);  
                if(mysqli_num_rows($result) > 0)  
                {  
                     while($row = mysqli_fetch_array($result))  
                     {  
                ?>  
                <div class="col-md-2">			
                     <div id="draggable" class="ui-widget-content" style="border:1px solid #333; background-color:#f1f1f1; border-radius:2px; padding:16px; cursor:cell" align="center">  
                          <img src="<?php echo $row["image"]; ?>" data-id="<?php echo $row['id']; ?>" data-name="<?php echo $row['name']; ?>" data-price="<?php echo $row['price']; ?>" class="img-responsive product_drag />  
                          <h4 class="text-info"><?php echo $row["name"]; ?></h4>  
                          <h4 class="text-danger">R$ <?php echo $row["price"]; ?></h4>  
                     </div>  
                </div>  
                <?php  
                     }  
                }  
                ?>  
   
  </div>
</div>
</body>
</html>
<script>  
 $(document).ready(function(data){  
      $('.product_drag_area').on('dragover', function(){  
           $(this).addClass('product_drag_over');  
           return false;  
      });  
      $('.product_drag_area').on('dragleave', function(){  
           $(this).removeClass('product_drag_over');  
           return false;  
      });  
      $('.product_drag').on('dragstart', function(e){  
           e.originalEvent.dataTransfer.setData("id", $(this).data("id"));  
           e.originalEvent.dataTransfer.setData("name", $(this).data("name"));  
           e.originalEvent.dataTransfer.setData("price", $(this).data("price"));  
      });  
      $('.product_drag_area').on('drop', function(e){  
           e.preventDefault();  
           $(this).removeClass('product_drag_over');  
           var id = e.originalEvent.dataTransfer.getData('id');  
           var name = e.originalEvent.dataTransfer.getData('name');  
           var price = e.originalEvent.dataTransfer.getData('price');  
           var action = "add";  
           $.ajax({  
                url:"action.php",  
                method:"POST",  
                data:{id:id, name:name, price:price, action:action},  
                success:function(data){  
                     $('#dragable_product_order').html(data);  
                }  
           })  
      });  
      $(document).on('click', '.remove_product', function(){  
           if(confirm("Tem certeza de que deseja remover este produto?"))  
           {  
                var id = $(this).attr("id");  
                var action="delete";  
                $.ajax({  
                     url:"action.php",  
                     method:"POST",  
                     data:{id:id, action:action},  
                     success:function(data){  
                          $('#dragable_product_order').html(data);  
                     }  
                });  
           }  
           else  
           {  
                return false;  
           }  
      });  
 });  
 
         $(function() {
          $( "#draggable" ).draggable();
        });
 </script>  
    
asked by anonymous 07.12.2018 / 00:22

0 answers