jquery draggable và mouseover

Question

Tôi hiện có một số menu thả xuống mở trên chuột. Tôi đang thực hiện một số tính năng kéo-thả-thả bằng cách kéo và có thể phân tách từ jquery ui. Dường như các sự kiện di chuột cho các menu không kích hoạt khi kéo, có cách nào để cho phép chúng hoạt động không?

Tôi đã thực hiện nó như sau (giản thể):

$('#some_id').draggable({ helper: 'clone', opacity: 0.35, zIndex: 20000, cursor: 'move' }); 
$('#some_menu').live('mouseenter click', function(){jThis.find('div').addClass('opened');}); 

Answer 1

Tôi vừa phát hiện ra rằng đây là một vấn đề rất logic. Một khi bạn bắt đầu kéo phần tử, nó dính dưới con trỏ chuột của bạn .. do đó, nó sẽ chỉ di chuột qua phần tử hiện tại mọi lúc !!

A (không quá đẹp) sửa chữa là để thiết lập các tùy chọn cursorAt để con trỏ chuột nằm ngoài các phần tử kéo:

$('#some_id').draggable({ 
     cursorAt: {left: -10, top: -10} 
}); 

Nó sẽ đẹp hơn nhiều nếu có một cách nào đó để vượt qua chuột con trỏ bên dưới phần tử đang được kéo, nhưng cho đến nay tôi vẫn chưa tìm được giải pháp cho điều đó.

Hy vọng điều này sẽ giúp ích một chút!

Answer 2

Bạn có thể viết trình xử lý sự kiện kéo cho hình thu thập của mình để kiểm tra xem con trỏ có vượt quá phần tử mà bạn muốn xử lý sự kiện di chuột hay không. Bạn sẽ phải tự mình phát hiện chuột bằng cách sử dụng phương thức jQuery offset(), width() và height() cho phần tử tĩnh và vị trí con trỏ từ đối tượng sự kiện cho sự kiện kéo hoặc ui.offset của jQuery UI, tùy theo mục đích nào tốt hơn .

Một tùy chọn khác, ít thanh lịch hơn nhưng có thể dễ dàng hơn để thực hiện, sẽ làm cho yếu tố tĩnh của bạn trở nên yếu trong trường hợp giao diện người dùng jQuery cho phép bạn xử lý sự kiện khi có thể di chuyển qua nó. Sau đó bạn có thể ngăn chặn sự sụt giảm nếu bạn không thực sự muốn cho phép nó.

Answer 3

Điều này có thể đạt được bằng cách sử dụng "over:" và "out:" nơi có thể định nghĩa phân đoạn của bạn.

$(".droppable").droppable({ 
    accept: '.draggable', 
    over: function(event, ui) { 
     $(this).addClass('temporaryhighlight'); 
    }, 
    out: function(event, ui) { 
     $(this).removeClass('temporaryhighlight'); 
    },  
    drop: function() { 
     //do some stuff 
    } 
}); 

Trong kịch bản của bạn, tuy nhiên, bạn sẽ phải tạo ra các menu của bạn droppable, mà tôi đoán là không chính xác những gì bạn muốn (tôi giả sử bạn đang cố gắng giảm xuống còn một cái gì đó là IN menu, không phải toàn bộ menu thả xuống). Có lẽ chỉ cần không làm gì hoặc quay trở lại cho thả: chức năng trên những mặt hàng ..?

Tín dụng và biết thêm:

http://forum.jquery.com/topic/draggable-highlighting-custom-div-on-droppable-hover

http://jsfiddle.net/nickadeemus2002/wWbUF/1/

Answer 4

Như Marcel Paans chỉ ra vấn đề là gậy helper dưới con trỏ chuột của bạn.

Giải pháp là đặt thuộc tính CSS pointer-events thành none trên phần tử trợ giúp. Làm điều này sẽ cho phép các sự kiện con trỏ kích hoạt trên các phần tử bên dưới trình trợ giúp.

Bạn có thể làm điều này dễ dàng bằng cách cung cấp các tùy chọn helper với một callback để tạo ra các yếu tố helper:

$('#some_id').draggable({ 
    helper: function() { 
     return $(this).clone().css("pointer-events","none").appendTo("body").show(); 
    } 
}); 

Answer 5

Dựa trên những gì Yonatan gửi:

JS của bạn:

$('#some_id').draggable({ 
    helper: 'clone', 
    opacity: 0.35, 
    zIndex: 20000, 
    cursor: 'move' 
}); 

Chỉ cần thêm mã này vào CSS của bạn:

#some_id.ui-draggable-dragging { 
    pointer-events: none; 
} 

là một công cụ dọn dẹp nhỏ hơn.