Giao diện người dùng jQuery Sắp xếp và: con trỏ chuột hoạt động để xử lý

Tôi đang cố sử dụng Sắp xếp để sắp xếp lại các mục của danh sách. Tôi đã có một xử lý cho mỗi mục của danh sách, trong đó có :hover và :active cài đặt con trỏ css, để con trỏ thay đổi khi người dùng di chuột qua các tay cầm (và một lần nữa khi kéo).Giao diện người dùng jQuery Sắp xếp và: con trỏ chuột hoạt động để xử lý

<html> 
    <head> 
    <style> 
     span { width: 20px; background: red } 
     span:hover { cursor: -moz-grab; } 
     span:active { cursor: -moz-grabbing; } 
    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <script> 
     $(function(){ 
     $('#sortable').sortable({ handle: 'span' }); 
     $('#sortable span').disableSelection(); 
     }); 
    </script> 
    </head> 
    <body> 
    <ul id="sortable"> 
     <li><span>grab 0 here</span> I'm 0!</li> 
     <li><span>grab 1 here</span> I'm 1!</li> 
     <li><span>grab 2 here</span> I'm 2!</li> 
     <li><span>grab 3 here</span> I'm 3!</li> 
     <li><span>grab 4 here</span> I'm 4!</li> 
     <li><span>grab 5 here</span> I'm 5!</li> 
     <li><span>grab 6 here</span> I'm 6!</li> 
     <li><span>grab 7 here</span> I'm 7!</li> 
    </ul> 
    </body> 
</html>

Vấn đề là con trỏ :active ngừng hoạt động. Tôi không chắc chắn tại sao, nó hoạt động khi tôi không sử dụng sortable, nhưng sau đó, khi tôi bật nó lên trong firebug, tôi có thể thấy rằng con trỏ :hover đang được áp dụng, nhưng không có sự thay đổi để :active.

(để đơn giản, tôi đang sử dụng -moz-grab và -moz-grabbing trong ví dụ trên, không hoạt động trong tất cả các trình duyệt).

Bất kỳ ý tưởng nào có thể xảy ra sai?

Nguồn

2011-11-28 rampion

Ok, tôi đã tìm ra một bản hack để giải quyết vấn đề của mình. Đó là hackish, vì vậy nếu có ai đó có cái gì tốt hơn, hãy cho tôi biết.

Về cơ bản, tôi đã bỏ :active ủng hộ lớp tùy chỉnh được thêm vào mousedown và bị xóa trên mouseup.

<html> 
 

 
<head> 
 
    <style> 
 
    span { 
 
     width: 20px; 
 
     background: red 
 
    } 
 
    span:hover { 
 
     cursor: -moz-grab; 
 
    } 
 
    .grabbed:hover { 
 
     cursor: -moz-grabbing; 
 
    } 
 
    </style> 
 

 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
    <script> 
 
    $(function() { 
 
     $('#sortable').sortable({ 
 
     handle: 'span' 
 
     }); 
 
     $('#sortable span').disableSelection(); 
 
     $('#sortable span').mousedown(function() { 
 
     $(this).addClass('grabbed') 
 
     }); 
 
     $('#sortable span').mouseup(function() { 
 
     $(this).removeClass('grabbed') 
 
     }); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <ul id="sortable"> 
 
    <li><span>grab 0 here</span> I'm 0!</li> 
 
    <li><span>grab 1 here</span> I'm 1!</li> 
 
    <li><span>grab 2 here</span> I'm 2!</li> 
 
    <li><span>grab 3 here</span> I'm 3!</li> 
 
    <li><span>grab 4 here</span> I'm 4!</li> 
 
    <li><span>grab 5 here</span> I'm 5!</li> 
 
    <li><span>grab 6 here</span> I'm 6!</li> 
 
    <li><span>grab 7 here</span> I'm 7!</li> 
 
    </ul> 
 
</body> 
 

 
</html>

Nguồn

2011-11-28 22:10:21 rampion

<html> 
 

 
<head> 
 
    <style> 
 
    .grab { 
 
     cursor: hand; 
 
     cursor: grab; 
 
     cursor: -moz-grab; 
 
     cursor: -webkit-grab; 
 
    } 
 
    .grabbing { 
 
     cursor: grabbing; 
 
     cursor: -moz-grabbing; 
 
     cursor: -webkit-grabbing; 
 
    } 
 
    </style> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
    <script type="text/javascript"> 
 
    $(function() { 
 
     $(document).on('mousedown mouseup', '.grab, .grabbing', function(event) { 
 
     $(this).toggleClass('grab').toggleClass('grabbing'); 
 
     }); 
 
     $('#drag').draggable(); 
 
    }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id="drag" class="grab" style="width: 200px;height:200px;">Grab Me</div> 
 
</body> 
 

 
</html>

Không cần xử lý riêng biệt với .Trên mới/.off chức năng jQuery

Nguồn

2012-01-20 00:53:58 oLinkWebDevelopment

đoạn của bạn không còn vẻ là làm việc –

Một trễ trả lời chút nhưng bạn có thể sử dụng jQuery UI sortableoption cursor

$('#sortable').sortable({ 
    cursor: "grabbing" 
});

Vì vậy, bạn có thể tránh thêm jquery và css.

<html> 
    <head> 
    <style> 
     span { width: 20px; background: red } 
     span:hover { cursor: -moz-grab; } 
    </style> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
    <script> 
     $(function(){ 
     $('#sortable').sortable({ 
      handle: 'span', 
      cursor: 'grabbing' 
     }); 
     $('#sortable span').disableSelection(); 
     }); 
    </script> 
    </head> 
    <body> 
    <ul id="sortable"> 
     <li><span>grab 0 here</span> I'm 0!</li> 
     <li><span>grab 1 here</span> I'm 1!</li> 
     <li><span>grab 2 here</span> I'm 2!</li> 
     <li><span>grab 3 here</span> I'm 3!</li> 
     <li><span>grab 4 here</span> I'm 4!</li> 
     <li><span>grab 5 here</span> I'm 5!</li> 
     <li><span>grab 6 here</span> I'm 6!</li> 
     <li><span>grab 7 here</span> I'm 7!</li> 
    </ul> 
    </body> 
</html>

Nguồn

2015-09-20 13:47:05

này vẫn dường như không khắc phục vấn đề –

@ 99Problems-Syntaxain'tone Phiên bản jqueryui nào bạn đã thử và không hoạt động? Câu trả lời là 1,5 tuổi ... và chưa sử dụng –

Nếu bạn đang sử dụng jquery ui, cách dễ nhất là sử dụng lớp css:

.draggable-item { 
    cursor: pointer; // Fallback 
    cursor: -webkit-grab; 
} 

draggable-item:active, 
draggable-item.ui-draggable-dragging { 
    cursor: -webkit-grabbing; 
}

Nguồn

2017-04-11 13:25:06

Giao diện người dùng jQuery Sắp xếp và: con trỏ chuột hoạt động để xử lý

Trả lời

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