無法使用排序對數據進行排序

Question

我的目標是拖動產品並自定義排序順序和價格。

我已成功使用拖放功能，但排序的東西無法正常工作。 這裏是我的小提琴

Here is My 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(); 
       } 
      }); 
     }); 

}); 

Answer 1

試試這個

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 
 
}); 
 

\t .span3 { 
 
\t  width:200px; 
 
\t } 
 
    .droppable { 
 
     height:400px;  
 
    } 
 
\t .droppable:hover { 
 
// \t  background: red; 
 
\t } 
 
\t .draggable:hover { 
 
\t  background: olive; 
 
\t } 
 
\t .editable:hover { 
 
\t  background: cyan; 
 
\t } 
 
\t .ui-state-active { 
 
\t  background: red; 
 
\t } 
 
\t .span3 { 
 
\t  border-style:solid; 
 
\t  border-width:1px; 
 
\t } 
 
\t

<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 -->