Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

André Severino

[Resolvido] Plugin - Drop e Drag

Por , em Javascript

Recommended Posts

André Severino    3

André Severino
Postado

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 {background: white; padding: 10px;  }

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;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img { 
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;}



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"
});
$(".shoppingCart ol").droppable({
   activeClass: "ui-state-default",
   hoverClass: "ui-state-hover",
   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();
   }
}).sortable({
   items: "li:not(.placeholder)",
   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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Sirotheau    43

Rafael Sirotheau
Postado

Troque a linha 71

"text": ui.draggable.text(),

 

por:

"html": ui.draggable.html(),

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito