Làm cách nào để kéo từ danh sách dọc được kết nối đến mục đầu tiên của một danh sách khác bên dưới với jQueryUI Sắp xếp?

Question

Tôi có một số UL theo chiều dọc xuống một trang. Chúng được thiết lập bằng cách sử dụng jQueryUI's sortable(). Ví dụ sống của tôi là:

http://jsfiddle.net/GVqPF/2/

tôi có thể kéo từ câu trả lời để làm cho nó trở thành yếu tố cuối cùng trong câu hỏi. Nhưng khi tôi kéo từ câu hỏi đến câu trả lời, trình giữ chỗ chuyển sang mục thứ hai trong danh sách câu hỏi. Tại thời điểm đó tôi có thể kéo nó lên trên cùng. Nhưng tôi không thể kéo trực tiếp đến vị trí đầu tiên trong danh sách Câu trả lời.

Here is a video thể hiện sự cố.

Bất kỳ ý tưởng nào tại sao tôi gặp sự cố này kéo từ danh sách ở trên vào phần tử đầu tiên của danh sách bên dưới?

Tôi đã thử chỉnh sửa phần đệm và lề trên cả hai danh sách và các mục có thể sắp xếp.

Cảm ơn, Denis

Answer 1

Khi bạn kéo một LI từ một danh sách vào một danh sách kết nối các "khoảng trống" trong danh sách cũ biến mất. Điều này làm cho các danh sách bên dưới nó "di chuyển lên" trên trang, giống như con trỏ của bạn đến danh sách tiếp theo. Điều này làm cho mục được kéo của bạn bị lơ lửng trên không gian thứ 2 thay vì số 1, buộc bạn phải di chuyển con trỏ lên lần nữa để có được khoảng trống thứ nhất.

Nếu danh sách của bạn nằm cạnh nhau theo chiều ngang, bạn sẽ không thấy vấn đề này (nhưng, tất nhiên, điều đó không giúp bạn).

Tôi chưa đưa ra giải pháp thực tế, nhưng hy vọng điều này sẽ giúp giải quyết vấn đề.

Answer 2

Đây là quan sát của tôi và lời giải thích hợp lý cho hành vi kỳ lạ này.

Khi di chuyển một phần tử từ vùng chứa câu hỏi sang vùng chứa câu trả lời, trình giữ chỗ ban đầu tự thêm vào phần đầu câu trả lời trước khi di chuyển con trỏ tiếp theo nhận được câu trả lời1 và answer2.Thực sự, điều này sẽ không xảy ra khi trình giữ chỗ nhảy trước answer1 và sau đó giữa answer1 và answer2.
* PS: * Hiệu ứng này có thể không hiển thị trong cửa sổ jsfiddle nhưng nếu bạn xây dựng một trang HTML mới với mã đã cho, bạn sẽ thấy những gì tôi đang nói.

Điều tra thêm cho thấy có lỗi trong plugin giao diện người dùng jquery có thể sắp xếp. Lấy phiên bản phát triển của jquery.ui.sortable.js và tìm cụm từ này "var dist = 10000; var itemWithLeastDistance = null". Mục tiêu của đoạn mã này là để tìm ra phần tử gần nhất gần nhất khi con trỏ di chuyển từ vùng chứa này sang vùng chứa khác.

Quan sát biến "cur" (Tôi đã thêm lệnh console.log() cho firebug). Giá trị của biến này luôn là . Vì giá trị của cur luôn là '0', mã cho rằng sẽ tính sai phần tử <li> cuối cùng là 'mụcWithLeastDistance' và nhảy sai ở đó.

//When entering a new container, we will find the item with the least distance and append our item near it 
       var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[innermostIndex].floating ? 'left' : 'top']; 
       for (var j = this.items.length - 1; j >= 0; j--) { 
        if (!$.ui.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) continue; 
        var cur = this.items[j][this.containers[innermostIndex].floating ? 'left' : 'top']; 
        //my comments 
        console.log("cur : %s for iteration: %s has base %s", cur, j, base); 
        if (Math.abs(cur - base) < dist) { 
         dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j]; 
         //my comments 
         console.debug(this.items[j]); 
        } 
       } 

Cho tôi biết cộng đồng nghĩ gì. chúng tôi có thể báo cáo điều này với nhóm jquery ui.