Cách truy cập id của phần tử có thể kéo được thả vào có thể sắp xếp

Question

Tôi đang sử dụng lib của JQuery để triển khai kéo và thả.

Làm cách nào để nhận được phần tử đang được kéo khi thả vào danh sách có thể sắp xếp?

Tôi muốn lấy id của div đang được kéo. Các yếu tố sau đây được kéo:

<div class="control" id="control[1]" > 
    <img src="img/controls/textfield.png" /> 
</div> 

tôi có tiêu chuẩn kéo chức năng từ tấm gương của họ

$(".control").draggable({ 
    connectToSortable: '#sortable', 
    helper: 'clone' 
}); 

chức năng dừng ở phần kéo với giá trị mã tiếp theo trở lại đúng

stop: function(event, ui) { 
    alert(ui.helper.attr('id')); 
} 

Và đây là yếu tố có thể sắp xếp:

<ul id="sortable"><li>test</li></ul> 

và chức năng của mình:

$("#sortable").sortable({ 
    revert: true, 
    accept: '.control', 
    receive: function(event, ui) { 
    // here i need to get draggable element id 
    } 
}); 

Tôi đã thử nhiều ui.id vv mà dường như không làm việc.

receive: function(event, ui) { 
    $(ui.draggable).attr("id") 
} 

ném undefined.

---

Cập nhật:

Xin lỗi, lỗi của tôi :) Khi mẹ tôi thường nói - "Đọc API trước khi mã hóa". ui.item.attr('id') hoạt động tốt.

Answer 1

Hãy thử

receive: function(event, ui) { 
    $(ui.item).attr("id") 
} 

Theo tài liệu của nhận (thực tất cả callbacks cho sắp xếp được) nhận hai đối số. Đối số thứ hai nên chứa:

• ui.helper - yếu tố helper hiện tại (thường xuyên nhất một bản sao của mục)
• ui.position - vị trí hiện tại của helper
• ui.offset - vị trí tuyệt đối hiện của helper
• ui.item - các yếu tố hiện tại kéo
• ui.placeholder - giữ chỗ (nếu bạn đã định nghĩa một)
• ui.người gửi - sự sắp xếp được nơi mục đến từ (chỉ tồn tại nếu bạn chuyển từ một danh sách kết nối với khác)

Answer 2

Từ jQuery UI docs kéo:

Nếu bạn muốn không chỉ cần kéo , nhưng kéo và thả, hãy xem jQuery UI Plugin có thể bỏ qua, cung cấp mục tiêu thả cho các hình kéo.

Xem http://docs.jquery.com/UI/API/1.7/Droppable

Answer 3

Tôi đã có một vấn đề tương tự, và có khó khăn truy cập vào các yếu tố trợ giúp trong trường hợp bắt đầu. Những gì tôi đã kết thúc làm là thiết lập thuộc tính helper thành một hàm trả về một số HTML tùy chỉnh. Tôi đã có thể truy cập HTML đó trong sự kiện bắt đầu mà không gặp bất kỳ sự cố nào.

helper: function() { 
    return '<div id="myHelper">This is my custom helper.</div>'; 
} 

Answer 4

Có vẻ hơi bị hack - nhưng đã làm việc! Tôi phải sử dụng $ ('. Dragrow1 li: last')

Answer 5

Có vẻ như số context của ui.item thay đổi giữa sự kiện beforeStop và sự kiện receive.

Trong trường hợp của tôi, tôi đang cố gắng để thiết lập các id của mặt hàng đó đến một giá trị được tạo ra và

receive: function (event, ui) { ui.item.attr("id", "control" + currentControlId++);} 

không làm việc cho tôi

Vì vậy, bạn có thể làm việc xung quanh này:

beforeStop: function (event, ui) { itemContext = ui.item.context;}, 
receive: function (event, ui) { $(itemContext).attr("id", "control" + currentControlId++);} 

Answer 6

Có, đó là vấn đề khi bạn trộn các vật thể có thể kéo có thể kéo được, vv .. Làm cho thùng chứa có thể sắp xếp thành có thể phân hủy được:

$("#sortable").sortable({ 
    revert: true, 
    accept: '.control', 
    receive: function(event, ui) { 
    // here i need to get draggable element id 
    } 
}); 

$('#sortable').droppable({ 
    accept: '.control', 
    drop: function(e, ui){ 
     var your_draggable_element = $(ui.draggable); 
     var your_helper = $(ui.helper); 
    } 
}); 

nên hoạt động

Answer 7

tôi đã thành công bằng cách sử dụng beforeStop sự kiện cho sắp xếp.

Từ here

beforeStop: Sự kiện này được kích hoạt khi sắp xếp các điểm dừng, nhưng khi giữ chỗ/helper vẫn có sẵn.

$("#something").sortable({ 
    beforeStop: function(event, ui) { 
    //you should check if ui.item is indeed the one you want! 
    item_id = $(ui.item).attr('id'); 
    $(ui.item).html('I'm changing the dropped element in the sortable!'); 
    } 
}); 

Answer 8

Bạn có thể sử dụng thuộc tính dữ liệu tùy chỉnh để lưu trữ id của các mục đã kéo. Thuộc tính này vẫn còn trên các mục bị loại bỏ. Các mã nguồn như sau:

<div class="..." data-id="item_id"> 
    ... 
</div> 

Sử dụng $('dropped item").data('id') trong sắp xếp được để có được id như:

$("#sortable").sortable({ 
    ..., 
    receive: function(e, ui) { 
     var id = ui.item.data('id'); 
    } 
}); 

Answer 9

$("#sortable1").sortable({ 
    connectWith: ".connectedSortable", 
    cancel: ".disabledItem", 
    items: "li:not(.disabledItem)", 
    receive: function(event,ui){ 

    **var page = ui.item.attr('value');** 

    var user = $("#select_users").val();