jQuery: Làm cách nào để mô phỏng Kéo và Thả trong Mã?

Question

EDIT: Dưới đây là một liên kết để cho bạn thấy mẫu mã của tôi: http://www.singingeels.com/jqtest/

Tôi có một trang rất đơn giản mà tham chiếu jquery-1.3.2.js, ui.core.js (phiên bản mới nhất) và ui.draggable.js (cũng là phiên bản mới nhất).

Tôi có một div mà tôi có thể kéo xung quanh rất dễ dàng (bằng cách sử dụng chuột tất nhiên):

<div id="myDiv">hello</div> 

và sau đó trong JavaScript:

$("#myDiv").draggable(); 

Đây là tác phẩm hoàn hảo. Nhưng, tôi cần để có thể mô phỏng một 'kéo và thả' bằng cách sử dụng mã một mình. Tôi có nó chủ yếu là làm việc, nhưng vấn đề là các sự kiện được bắn là sự kiện giữ chỗ.

Nếu bạn mở "ui.core.js" và di chuyển đến phía dưới ... bạn sẽ thấy điều này:

// These are placeholder methods, to be overriden by extending plugin 
_mouseStart: function(event) { }, 
_mouseDrag: function(event) { }, 
_mouseStop: function(event) { }, 
_mouseCapture: function(event) { return true; } 

Tại sao không phải là sự kiện được mở rộng đúng trong mô phỏng của tôi, nhưng khi bạn bấm xuống bằng chuột, chúng là? - Bất kỳ ý tưởng nào về cách buộc thuộc tính _mouseDrag: thuộc tính tuân theo phần mở rộng ghi đè trong "ui.draggable.js"?

Giải quyết vấn đề này sẽ rất lớn - và tôi dự định sẽ trình bày những lợi ích chính sau này.

Cảm ơn, -Timothy

EDIT: Dưới đây là một liên kết để cho bạn thấy mẫu mã của tôi: http://www.singingeels.com/jqtest/

EDIT 2: Nhấn vào liên kết ở trên và xem mã nguồn ... bạn sẽ thấy những gì tôi đang cố gắng làm. Đây là một đoạn mã:

$(document).ready(function() { 
    var myDiv = $("#myDiv"); 

    myDiv.draggable(); 

    // This will set enough properties to simulate valid mouse options. 
    $.ui.mouse.options = $.ui.mouse.defaults; 

    var divOffset = myDiv.offset(); 

    // This will simulate clicking down on the div - works mostly. 
    $.ui.mouse._mouseDown({ 
     target: myDiv, 
     pageX: divOffset.left, 
     pageY: divOffset.top, 
     which: 1, 

     preventDefault: function() { } 
    }); 
}); 

Answer 1

Có một số question in the JQuery forum about it. Nó không được giải quyết tại thời điểm viết, nhưng có thể có thêm thông tin trong tương lai.

---

EDIT: Nó được trả lời trên diễn đàn:

tôi khuyên bạn nên sử dụng plugin mô phỏng đó là những gì jQuery UI sử dụng để thử nghiệm kéo đơn vị và thả:

https://github.com/jquery/jquery-ui/blob/master/external/jquery-simulate/jquery.simulate.js

Bạn có thể xem ví dụ về u se bằng cách nhìn vào các đơn vị kiểm tra

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/core.js

https://github.com/jquery/jquery-ui/blob/master/tests/unit/draggable/events.js

Nhờ rdworth cho điều đó.

Answer 2

Bạn cần hiển thị mã bạn đang sử dụng để "mô phỏng" điều này. Bản năng ruột của tôi là bạn sẽ cần phải xây dựng các sự kiện DOM thích hợp và kích hoạt chúng, nhưng tôi không biết liệu jQuery có các phương tiện để tiêm các sự kiện nhân tạo hay không.

Bạn có thể gọi trực tiếp bộ xử lý sự kiện không?

Answer 3

Tôi đã tìm được giải pháp hoạt động khá tốt. Tôi có sự kiện thả gọi một chức năng gọi là onDragAndDrop(). Hàm đó nhận hai đối số, đối tượng jQuery draggable và đối tượng jQuery droppable.

$('.my-drop-target').droppable({ 
    drop: function(event, ui) { 
     onDragAndDrop(ui.draggable, $(event.target)); 
    } 
}); 

Trong bài kiểm tra của tôi, tôi có chức năng gọi trực tiếp trênDragAndDrop nhưng đảm bảo rằng người dùng có thể thực hiện hành động đó.

var simulateDragAndDrop = function(draggable, droppable) { 
     if (!draggable.data('uiDraggable')) { 
      throw new Error('Tried to drag and drop but the source element is not draggable!'); 
     } 
     if (!droppable.data('uiDroppable')) { 
      throw new Error('Tried to drag and drop but the target element is not droppable!'); 
     } 
     onDragAndDrop(draggable, droppable); 
    } 

Tôi đã tìm thấy nó là một giải pháp tốt, dễ sử dụng cho các bài kiểm tra đơn vị. Có lẽ tôi sẽ kết thúc bằng cách sử dụng nó cho một dự phòng có thể truy cập bàn phím là tốt.