Làm cách nào để tôi có thể tạo phần tử có thể kéo được, nhưng không phải là phần tử con của nó, bằng cách sử dụng giao diện người dùng jQuery?

Question

Ví dụ, tôi muốn có điều này:

<div class="draggable"> 
<p>Text that can be selected</p> 
</div> 

Answer 1

Bạn có thể sử dụng tùy chọn cancel, mà chấp nhận một bộ chọn cho phần tử con của đối tượng kéo rằng không nên cho phép kéo:

$('.draggable').draggable({cancel : 'p'}); 

JS Fiddle demo .

Answer 2

Có thể có các thành phần khác là trẻ em hơn p. Trong trường hợp này bạn phải sử dụng không gian selector:

$(".draggable").draggable({cancel: ".draggable *"}); 

Ví dụ làm việc là tại JSFIDDLE.

Nó sử dụng bộ chọn không gian, chọn tất cả các phần tử con cho dù chúng là con cái hay con cái. Ví dụ về công cụ chọn không gian tại w3schools.

Nhược điểm của điều này là tất cả các textnodes phải được gói bên trong thẻ, ví dụ. span, div, p. Nếu chúng không nằm trong thẻ, bộ chọn * không thể khớp với chúng. Để giữ nguyên các textnode đơn giản, bạn phải sử dụng mã phức tạp hơn, vì CSS và jQuery không chứa bộ chọn cho các textnode đơn giản. Bạn có thể ví dụ. sử dụng thẻ của riêng bạn để gói văn bản. Lý do cho nút tùy chỉnh là nó làm giảm khả năng cho các phần tử tùy chỉnh này để được theo kiểu vô tình (như khi sử dụng khoảng thời gian vv), trong trường hợp này, chúng tôi đặt tên cho nó 'tùy chỉnh':

$(".draggable").draggable({cancel:'.draggable *'}) 
.contents().filter(function() {return this.nodeType == Node.TEXT_NODE;}) 
.wrap('<custom></custom>'); 

Trên đây tại JSFIDDLE. Bây giờ cũng có thể chọn các textnode đơn giản. Mọi thứ sẽ thay đổi nếu bạn thêm động sau đó thêm các văn bản vào phần tử có thể kéo. Sau đó, bạn phải quấn chúng lại.

Answer 3

Bạn có thể ghi đè hàm start làm một phần của các tùy chọn khởi tạo. Trả lại sai ở đây sẽ thoát ra khỏi nó sớm. Để truy cập sự kiện chuột được tạo khi nhấp vào, bạn có thể truy cập thuộc tính originalEvent trên sự kiện jQuery.

$(".draggable").draggable({ 
    start: function(event, ui) { 
    return event.originalEvent.target === this; 
    } 
}); 

Điều này chỉ cho phép cha mẹ có thể kéo được. Bạn có thể thay thế this bằng bất kỳ phần tử nào bạn muốn trở thành mục có thể kéo duy nhất, chỉ cần đảm bảo đó là nút dom được so sánh.

Plunkr example