我想使用Drag&滴为此,我使用了jQuery UI Droppable。代码为:-
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( ".category-products" ).accordion();
$( ".product-name" ).draggable({
appendTo: "body",
helper: "clone"
});
$( ".block-content ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
});
使用此代码,产品名称可以放入购物车,但不会添加到购物车中。我尝试过,但无法将产品名称添加到购物车中。请帮帮我。
假设您的产品没有任何自定义选项。
将您的产品id存储为产品列表中的隐藏字段(draggable li)
<li>Lolcat Shirt
<input type='hidden' value='2' name='pid' />
</li>
然后进行
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "> p" )
.html( "Dropped!" );
add product to cart
p_id = ui.draggable.find('input[name="pid"]').val();
$.get("/path/to/app/checkout/cart/add?qty=1&product=" + p_id)
return false;
}
请参阅http://jsfiddle.net/C2Ufk/
您需要执行类似的操作来删除项目
我得到了一个相同的模块。。
拖动&Drop Sort产品,它对我来说很好……还有非常棒的开发。