2012-02-22 45 views
13

đây là một câu hỏi đơn giản. Tôi có một 'ul' mà tôi đã thực hiện sắp xếp thông qua hàm jquery-ui's sortable(). Tôi muốn loại bỏ các yếu tố khi chúng được kéo ra khỏi danh sách. Cách tôi có nó thực hiện công trình theo nghĩa là khi tôi kéo một yếu tố ra khỏi danh sách nó được loại bỏ, nhưng nó cũng bị loại bỏ khi tôi chỉ sắp xếp lại danh sách. Làm cách nào để tôi đạt được hành vi mà tôi đang tìm kiếm mà không có hành vi ngoài ý muốn này. Dưới đây là tất cả các mã:Làm thế nào để loại bỏ một mục được kéo ra khỏi danh sách của nó?

<html> 
<head> 
    <link type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="Stylesheet" /> 
    <script type="text/javascript" src="jquery-ui/js/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.17.custom.min.js"></script> 

    <script type="text/javascript"> 
    $(function(){ 
     $('#sortme').sortable({ 
      out: function(event, ui){ 
       ui.item.remove(); 
      } 
     }); 
     $('#sortme').disableSelection(); 
    }); 
    </script> 

    <style> 
    li{ 
     list-style-type: none; 
     width: 200px; 
     height: 50px; 
     border: 1px solid #000; 
     text-align: center; 
     box-sizing: border-box; 
     padding-top: 15px; 
    } 
    </style> 
    <title> jqui sort test </title> 

</head> 
<body> 
    <ul id='sortme'> 
     <li>0</li> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
     <li>4</li> 
     <li>5</li> 
     <li>6</li> 
     <li>7</li> 
     <li>8</li> 
     <li>9</li> 
    </ul> 
</body> 
</html> 

Cảm ơn sự giúp đỡ của bạn!

Trả lời

25

Bạn có thể thử sử dụng biến để kiểm tra xem các mục bạn đang kéo có bị kéo ra khỏi vùng chứa chính hay không.

Bạn có thể sử dụng quara sự kiện của giao diện người dùng jQuery sắp xếp được để gán giá trị cho biến này và sau đó thực hiện việc loại bỏ các mục kéo trên kiện beforeStop.

đây là một bản demo của những gì tôi đã đưa ra: http://jsfiddle.net/drewP/m7VJq/1/

cho tôi biết nếu nó làm việc cho bạn.

+0

Tôi quên mất quá nhiều lần. Cảm ơn Drew! :-D – Fallenreaper

+0

Điều này thật tuyệt vời! Lưu ngày Drew! :) – cbloss793

0

Tôi chắc chắn có nhiều cách chính xác để làm điều đó nhưng nếu tôi phải làm điều đó tôi có thể sẽ sử dụng một yếu tố bao bọc như droppable. Tại sao không chứa trang web chính, #wrapper toàn năng! Liên kết với sự kiện drop sự kiện có thể phân hủy và xóa hoàn toàn mục đó. Nó sẽ không ở lại trong sắp xếp hoặc.

Các vấn đề liên quan