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>