Làm cách nào để làm nổi bật vùng có thể di chuyển trên di chuột bằng cách sử dụng jquery ui draggable

Question

Tôi thực sự có hai câu hỏi, tên trong tiêu đề là chính. Tôi có nhiều phần tử div trên trang được đánh dấu là có thể phân đoạn. Bên trong các yếu tố div tôi có nhịp được đánh dấu là có thể kéo được. Tôi muốn nó như vậy khi bạn đang kéo một yếu tố và nó được di chuột qua một khu vực có thể phân hủy khu vực nổi bật hoặc có một biên giới để họ biết họ có thể thả nó ở đó.

Là câu hỏi phụ, tất cả các phần tử có thể kéo của tôi đều có màn hình: khối, chiều rộng và hình nổi trên chúng, vì vậy chúng trông đẹp và gọn gàng trong các vùng có thể phân tách của tôi. Khi các vật phẩm bị rơi, chúng dường như có một vị trí được đặt cho chúng khi chúng không còn nổi đẹp và gọn gàng như phần còn lại của đồ vật của tôi nữa. Để tham khảo, đây là javascript của tôi.

$('.drag_span').draggable({ 
    revert: true 
}); 
$('.drop_div').droppable({ 
    drop: handle_drop_patient 
}); 

function handle_drop_patient(event, ui) { 
    $(this).append($(ui.draggable).clone()); 
    $(ui.draggable).remove(); 
} 

Answer 1

Kiểm tra http://jqueryui.com/demos/droppable/#visual-feedback.

Ex:

$("#draggable").draggable(); 
$("#droppable").droppable({ 
    hoverClass: "ui-state-active", 
    drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
       .html("Dropped!"); 
    } 
}); 
$("#draggable2").draggable(); 
$("#droppable2").droppable({ 
    accept: "#draggable2", 
    activeClass: "ui-state-hover", 
    drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
       .html("Dropped!"); 
    } 
}); 

Answer 2

này nên làm việc cho thêm một điểm nhấn trên di chuột.

$('.drop_div').droppable({ 
    hoverClass: "highlight", 
    drop: handle_drop_patient, 
}); 

Sau đó, tạo ra một lớp css cho nổi bật mà bộ biên giới hoặc thay đổi màu nền hoặc bất cứ điều gì bạn muốn.

.highlight { 
    border: 1px solid yellow; 
    background-color:yellow; 
} 

Khi vị trí liên quan, bạn có thể đăng ký lại css khi hoàn tất việc thả.

function handle_drop_patient(event, ui) { 
    $(this).append($(ui.draggable).clone().css({'float':'left','display':'block'})); 
    $(ui.draggable).remove(); 
} 

Answer 3

FYI: hoverClass đã không được dùng để ủng hộ tùy chọn classes. Hiện giờ là:

$('.drop_div').droppable({ 
    classes: { 
     'ui-droppable-hover': 'highlight' 
    }, 
    drop: handle_drop_patient 
});