Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia Pessoal, estou tentando fazer um efeito igual aquele do carrinho de compras do submarino 'arrastar e soltar'.
Bom consegui fazer a parte cliente, mas a unica coisa que não está funcionando é que não consigo colocar a imagem. Segue abaixo o código e um link para a página.
Link - Demo
código.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<style type='text/css'>body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}border-collapse:collapse;
border-spacing:0;
}border:0;
}font-style:normal;
font-weight:normal;
}list-style:none;
}text-align:left;
}font-size:100%;
font-weight:normal;
}content:'';
}h1 { padding: .2em; margin: 0; }
#products { float:left; width:200px; height: 600px; margin-right: 20px; }
#products ul {list-style: disc; padding: 1em 0 1em 3em;}
.shoppingCart{ width: 200px; margin: 20px; float: left; }
/ style the list to maximize the droppable hitarea /
.shoppingCart ol { margin: 0; padding: 1em 0 1em 3em; list-style-type: decimal; }
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
$("#products li").draggable({
appendTo: "body",
helper: "clone"
}); drop: function(event, ui) {
var self = $(this);
self.find(".placeholder").remove();
var productid = ui.draggable.attr("data-id");
if (self.find("[data-id=" + productid + "]").length) return;
$("<li></li>", {
"text": ui.draggable.text(),
"data-id": productid
}).appendTo(this);
// To remove item from other shopping chart do this
var cartid = self.closest('.shoppingCart').attr('id');
$(".shoppingCart:not(#"+cartid+") [data-id="+productid+"]").remove();
} sort: function() {
$(this).removeClass("ui-state-default");
}
});
});
//]]>
</script>
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">Lista de produtos</h1>
<div class="ui-widget-content">
<ul>
<li data-id="1"> Produto 1 </li>
<li data-id="2"> Produto 2 </li>
<li data-id="3"> Produto 3 </li>
<li data-id="4"> Produto 4 </li>
<li data-id="5"> Produto 5 </li>
<li data-id="6"><img src="http://h.imguol.com/2009/uol.jpg" alt="Produto 6" title="Produto 6"></li>
</ul>
</div>
</div>
<div id="shoppingCart1" class="shoppingCart">
<h1 class="ui-widget-header">Carrinho 1</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Arraste seus produtos aqui</li>
</ol>
</div>
</div>
<div id="shoppingCart2" class="shoppingCart">
<h1 class="ui-widget-header">Carrinho 2</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Arraste seus produtos aqui</li>
</ol>
</div>
</div>
</body>
</html>Carregando comentários...