Cách kéo và thả văn bản trong div có thể chỉnh sửa được bằng jQuery UI

Question

Tôi đang cố gắng di chuyển một văn bản có thể kéo trong một div có thể chỉnh sửa được.

Đây là div:

<div class="droppable_tag" contenteditable="true">Facebook shuts down friends data <a contenteditable="false" class="draggable_tag">API</a> to generate more trust among users</div> 

Mục đích là để có mà văn bản (trong trường hợp này "API") lắp vào div contenteditable khi nó đã bị rơi tại nơi nó được giảm xuống. Tôi đã cố gắng nhận được giá trị của div nhưng không biết làm thế nào để chèn các draggable vào nó.

Đây là mã: https://jsfiddle.net/gsLq7cxy/1/

Bất kỳ giúp đánh giá cao!

Answer 1

Có lẽ bạn nên sử dụng số sortable method thay thế; nó có tất cả các thuộc tính của draggable, nhưng sắp xếp lại tất cả các mục dựa trên nơi một mục bị bỏ.

Bạn cần phải quấn từng từ trong một phần tử như span (xem this post để biết giải pháp) và sau đó đặt bố cục gốc là: $(".droppable_tag").sortable();.