1
Well, I’m facing two little problems. When I drag the drag, it’s not inserting in the part that is to be inserted. It stays on top. Another thing too, you’re only getting one div, and in my while it was to take all the results in the div and be the same to all.
Thanks 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>
<link rel="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>
<link href="//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>
Your question is not about PHP, just html and javascript, edit the question by presenting a rendered version of your page so we can see a [MCVE]
– Leandro Angelo