无法使用 sortable 对数据进行排序
Unable to Sort data using sortable
我的objective是拖拽商品，自定义排序和价格。
我已经成功地使用了拖放功能，但是可排序的东西不起作用。
这是我的 fiddle
HTML
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix productsUL ui-droppable" style="min-height: 120px;">
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l20$hfproductId" type="hidden" id="20" class="hfproductId" value="C4BAB31E-F95F-4DEC-A13E-CC66D8C02851">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="12" style="display: none;">
<h5 class="ui-widget-header truncate">Black Coffee Tall</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l21$hfproductId" type="hidden" id="21" class="hfproductId" value="26E69E8E-9120-43CC-B8D0-2B4288BC6EAC">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="15" style="display: none;">
<h5 class="ui-widget-header truncate">Black Coffee Grand</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l22$hfproductId" type="hidden" id="22" class="hfproductId" value="A2AF9FF7-E9CB-419A-B93C-CC3852E4908D">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="9" style="display: none;">
<h5 class="ui-widget-header truncate">Coffee Latte</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l23$hfproductId" type="hidden" id="23" class="hfproductId" value="51DF12B7-D131-47C0-A2E5-273D963120A5">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="9" style="display: none;">
<h5 class="ui-widget-header truncate">Coffee Latte Short</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l24$hfproductId" type="hidden" id="24" class="hfproductId" value="3DAED6FA-ECC5-4E4A-AA39-ADD303992807">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="12" style="display: none;">
<h5 class="ui-widget-header truncate">Coffee Latte Tall</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l25$hfproductId" type="hidden" id="25" class="hfproductId" value="7205441D-7F59-4A46-BC54-F3A517B9A7EE">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="15" style="display: none;">
<h5 class="ui-widget-header truncate">Coffee Latte Grand</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l26$hfproductId" type="hidden" id="26" class="hfproductId" value="C186AC2D-8F64-4875-9DC9-293F81CAAC40">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="9" style="display: none;">
<h5 class="ui-widget-header truncate">vanilla Latte Coffee</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l27$hfproductId" type="hidden" id="27" class="hfproductId" value="DC422052-9C65-4EB8-8ADE-9674B3AF9290">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="9" style="display: none;">
<h5 class="ui-widget-header truncate">vanilla Latte Short</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
</ul>
<hr>
<h1>
Final Grid
</h1>
<div id="trash" class="row ui-widget-content ui-state-default sortable" style="min-height: 120px;">
</div>
JS
$(document).ready(function(){
$(function () {
// There's the gallery and the trash
var $gallery = $("#gallery"),
$trash = $("#trash");
// Let the gallery items be draggable
$("li", $gallery).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
$trash.droppable({
accept: "#gallery > li",
classes: {
"ui-droppable-active": "ui-state-highlight"
},
drop: function (event, ui) {
debugger;
selectproduct(ui.draggable);
}
});
// Let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash li",
classes: {
"ui-droppable-active": "custom-state-active"
},
drop: function (event, ui) {
deleteproduct(ui.draggable);
}
});
// Image deletion function
var recycle_icon = "<div style='text-align: center; width: 160px;'><a href='link/to/recycle/script/when/we/have/js/off' title='Delete this product' class='ui-icon ui-icon-refresh'>Delete product</a></div>";
function selectproduct($item) {
$item.hide(function () {
var $list = $("ul", $trash).length ?
$("ul", $trash) :
$("<ul class='gallery ui-helper-reset grid'/>").appendTo($trash);
$item.find("a.ui-icon-trash").remove();
$item.append(recycle_icon).appendTo($list).show(function () {
$item
.animate({})
.find("img")
.animate({ height: "36px" });
}).addClass('col-md-2 grid-item').find('.price').show();
});
}
// Image recycle function
var trash_icon = "<div style='text-align: center; width: 160px;'><a href='link/to/trash/script/when/we/have/js/off' title='Select this product' class='ui-icon ui-icon-trash'>Select product</a></div>";
function deleteproduct($item) {
$item.hide(function () {
$item
.find("a.ui-icon-refresh")
.remove()
.end()
//.css("width", "96px")
.append(trash_icon)
.find("img")
.css("height", "72px")
.end()
.appendTo($gallery)
.show().removeClass('col-md-2 grid-item').find('.price').hide();
});
}
// Image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr("href"),
title = $link.siblings("img").attr("alt"),
$modal = $("img[src$='" + src + "']");
if ($modal.length) {
$modal.dialog("open");
} else {
var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
.attr("src", src).appendTo("body");
setTimeout(function () {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// Resolve the icons behavior with event delegation
$("ul.gallery > li").off('click').on("click", function (event) {
debugger;
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-trash")) {
selectproduct($item);
return false;
} else if ($target.is("a.ui-icon-zoomin")) {
viewLargerImage($target);
} else if ($target.is("a.ui-icon-refresh")) {
deleteproduct($item);
return false;
}
else if ($target.is(".price")) {
$target.focus();
}
});
});
});
试试这个
var new_id = 20;
$(".draggable").draggable({
cursor: 'move',
revert: 'invalid',
helper: function () {
//alert($(this).attr('class'));
var cloned = $(this).clone();
cloned.attr('id', (++new_id).toString());
return cloned;
},
distance: 20
});
$(".droppable").droppable({
hoverClass: 'ui-state-active',
tolerance: 'pointer',
accept: function (event, ui) {
return true;
},
drop: function (event, ui) {
//alert($(this).parent().html());
//alert($(ui.helper).attr('class'));
var obj;
if ($(ui.helper).hasClass('draggable')) {
//alert('draggable');
obj = $(ui.helper).clone();
obj.removeClass('draggable').addClass('editable').removeAttr('style');
//obj.addClass('droppable');
$(this).append(obj);
}
//alert($(this).parent().html());
}
}).sortable({
revert: false
});
.span3 {
width:200px;
}
.droppable {
height:400px;
}
.droppable:hover {
// background: red;
}
.draggable:hover {
background: olive;
}
.editable:hover {
background: cyan;
}
.ui-state-active {
background: red;
}
.span3 {
border-style:solid;
border-width:1px;
}
<div class="row">
<div id="draggable1" class= "draggable span3">
<p>drag me</p>
</div>
<div id="draggable" class="draggable span3">
<p>drag me</p>
</div>
</div>
<hr>
<!-- Editeur : grille pour déposer -->
<div id="editor-container">
<div class="row droppable">
<div class="editable span3">
<p>Container</p>
</div>
</div>
</div>
<!-- editor-container -->
我的objective是拖拽商品，自定义排序和价格。
我已经成功地使用了拖放功能，但是可排序的东西不起作用。 这是我的 fiddle
HTML
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix productsUL ui-droppable" style="min-height: 120px;">
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l20$hfproductId" type="hidden" id="20" class="hfproductId" value="C4BAB31E-F95F-4DEC-A13E-CC66D8C02851">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="12" style="display: none;">
<h5 class="ui-widget-header truncate">Black Coffee Tall</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l21$hfproductId" type="hidden" id="21" class="hfproductId" value="26E69E8E-9120-43CC-B8D0-2B4288BC6EAC">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="15" style="display: none;">
<h5 class="ui-widget-header truncate">Black Coffee Grand</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l22$hfproductId" type="hidden" id="22" class="hfproductId" value="A2AF9FF7-E9CB-419A-B93C-CC3852E4908D">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="9" style="display: none;">
<h5 class="ui-widget-header truncate">Coffee Latte</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l23$hfproductId" type="hidden" id="23" class="hfproductId" value="51DF12B7-D131-47C0-A2E5-273D963120A5">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="9" style="display: none;">
<h5 class="ui-widget-header truncate">Coffee Latte Short</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l24$hfproductId" type="hidden" id="24" class="hfproductId" value="3DAED6FA-ECC5-4E4A-AA39-ADD303992807">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="12" style="display: none;">
<h5 class="ui-widget-header truncate">Coffee Latte Tall</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l25$hfproductId" type="hidden" id="25" class="hfproductId" value="7205441D-7F59-4A46-BC54-F3A517B9A7EE">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="15" style="display: none;">
<h5 class="ui-widget-header truncate">Coffee Latte Grand</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l26$hfproductId" type="hidden" id="26" class="hfproductId" value="C186AC2D-8F64-4875-9DC9-293F81CAAC40">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="9" style="display: none;">
<h5 class="ui-widget-header truncate">vanilla Latte Coffee</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
<li class="ui-widget-content ui-corner-tr productList ui-draggable ui-draggable-handle" style="display: list-item;">
<div class="divProduct" style="background-image: url(/assets/img/attach-blue.png);">
<input name="l27$hfproductId" type="hidden" id="27" class="hfproductId" value="DC422052-9C65-4EB8-8ADE-9674B3AF9290">
<input type="text" class="form-control price txtNum" onkeypress="return numbersonly(event)" value="9" style="display: none;">
<h5 class="ui-widget-header truncate">vanilla Latte Short</h5>
</div>
<div class="click" style="text-align: center; width: 160px;">
<a href="link/to/trash/script/when/we/have/js/off" title="Select this image" class="ui-icon ui-icon-trash">Select Product</a>
</div>
</li>
</ul>
<hr>
<h1>
Final Grid
</h1>
<div id="trash" class="row ui-widget-content ui-state-default sortable" style="min-height: 120px;">
</div>
JS
$(document).ready(function(){
$(function () {
// There's the gallery and the trash
var $gallery = $("#gallery"),
$trash = $("#trash");
// Let the gallery items be draggable
$("li", $gallery).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
$trash.droppable({
accept: "#gallery > li",
classes: {
"ui-droppable-active": "ui-state-highlight"
},
drop: function (event, ui) {
debugger;
selectproduct(ui.draggable);
}
});
// Let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash li",
classes: {
"ui-droppable-active": "custom-state-active"
},
drop: function (event, ui) {
deleteproduct(ui.draggable);
}
});
// Image deletion function
var recycle_icon = "<div style='text-align: center; width: 160px;'><a href='link/to/recycle/script/when/we/have/js/off' title='Delete this product' class='ui-icon ui-icon-refresh'>Delete product</a></div>";
function selectproduct($item) {
$item.hide(function () {
var $list = $("ul", $trash).length ?
$("ul", $trash) :
$("<ul class='gallery ui-helper-reset grid'/>").appendTo($trash);
$item.find("a.ui-icon-trash").remove();
$item.append(recycle_icon).appendTo($list).show(function () {
$item
.animate({})
.find("img")
.animate({ height: "36px" });
}).addClass('col-md-2 grid-item').find('.price').show();
});
}
// Image recycle function
var trash_icon = "<div style='text-align: center; width: 160px;'><a href='link/to/trash/script/when/we/have/js/off' title='Select this product' class='ui-icon ui-icon-trash'>Select product</a></div>";
function deleteproduct($item) {
$item.hide(function () {
$item
.find("a.ui-icon-refresh")
.remove()
.end()
//.css("width", "96px")
.append(trash_icon)
.find("img")
.css("height", "72px")
.end()
.appendTo($gallery)
.show().removeClass('col-md-2 grid-item').find('.price').hide();
});
}
// Image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr("href"),
title = $link.siblings("img").attr("alt"),
$modal = $("img[src$='" + src + "']");
if ($modal.length) {
$modal.dialog("open");
} else {
var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
.attr("src", src).appendTo("body");
setTimeout(function () {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// Resolve the icons behavior with event delegation
$("ul.gallery > li").off('click').on("click", function (event) {
debugger;
var $item = $(this),
$target = $(event.target);
if ($target.is("a.ui-icon-trash")) {
selectproduct($item);
return false;
} else if ($target.is("a.ui-icon-zoomin")) {
viewLargerImage($target);
} else if ($target.is("a.ui-icon-refresh")) {
deleteproduct($item);
return false;
}
else if ($target.is(".price")) {
$target.focus();
}
});
});
});
试试这个
var new_id = 20;
$(".draggable").draggable({
cursor: 'move',
revert: 'invalid',
helper: function () {
//alert($(this).attr('class'));
var cloned = $(this).clone();
cloned.attr('id', (++new_id).toString());
return cloned;
},
distance: 20
});
$(".droppable").droppable({
hoverClass: 'ui-state-active',
tolerance: 'pointer',
accept: function (event, ui) {
return true;
},
drop: function (event, ui) {
//alert($(this).parent().html());
//alert($(ui.helper).attr('class'));
var obj;
if ($(ui.helper).hasClass('draggable')) {
//alert('draggable');
obj = $(ui.helper).clone();
obj.removeClass('draggable').addClass('editable').removeAttr('style');
//obj.addClass('droppable');
$(this).append(obj);
}
//alert($(this).parent().html());
}
}).sortable({
revert: false
});
.span3 {
width:200px;
}
.droppable {
height:400px;
}
.droppable:hover {
// background: red;
}
.draggable:hover {
background: olive;
}
.editable:hover {
background: cyan;
}
.ui-state-active {
background: red;
}
.span3 {
border-style:solid;
border-width:1px;
}
<div class="row">
<div id="draggable1" class= "draggable span3">
<p>drag me</p>
</div>
<div id="draggable" class="draggable span3">
<p>drag me</p>
</div>
</div>
<hr>
<!-- Editeur : grille pour déposer -->
<div id="editor-container">
<div class="row droppable">
<div class="editable span3">
<p>Container</p>
</div>
</div>
</div>
<!-- editor-container -->