Sử dụng tính năng kéo và thả của giao diện người dùng jQuery: thay đổi phần tử đã kéo khi thả

Question

Khi sử dụng các biểu tượng kéo và giao diện người dùng jQuery, bạn thay đổi phần tử được kéo và thả khi thả như thế nào? Tôi đang cố gắng kéo một DIV sang một DIV có thể sắp xếp khác. Khi thả, tôi muốn thay đổi các lớp học trên DIV đã giảm và thay đổi nội dung bên trong của nó.

Sau khi đọc câu hỏi StackOverflow khác nhau, mã của tôi trông như thế này:

$(".column").droppable({ 
    accept: '.element-dragging', 
    drop: function(event, ui) { 
     if ($(ui.draggable).hasClass("elemtxt")) { 
      $(ui.draggable).replaceWith('<div class="element element-txt">This text box has been added!</div>'); 
     } 
    } 
}) 

Nó không làm việc cho tôi. :-(

Một bản sao đầy đủ của mã của tôi tọa lạc tại http://www.marteki.com/jquery/bugkilling.php

Answer 1

Lấy mã javascript đầy đủ từ các liên kết mà bạn đã đưa ra, bạn có thể thay đổi nó như sau để làm cho nó làm việc:.

$(function() { 
    $(".elementbar div").draggable({ 
     connectToSortable: '.column', 
     cursor: 'move', 
     cursorAt: { top: 0, left: 0 }, 
     helper: 'clone', 
     revert: 'invalid' 
    }); 
    $(".elementbar div, .elementbar div img").disableSelection(); 
    $(".column").sortable({ 
     connectWith: '.column', 
     cursor: 'move', 
     cursorAt: { top: 0, left: 0 }, 
     placeholder: 'ui-sortable-placeholder', 
     tolerance: 'pointer', 
     stop: function(event, ui) { 
      if (ui.item.hasClass("elemtxt")) { 
       ui.item.replaceWith('<div class="element element-txt">This text box has been added!</div>'); 
      } 
     } 
    }); 
    $(".element").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"); 
}); 

đã có một vài vấn đề:.

1. sự kiện thả (mà bạn hiển thị trong câu hỏi của bạn) đã không được bắn bởi vì bạn đã không accept ing đúng nội dung
2. Nếu bạn có cả hai số .sortable & .droppable, bạn kết thúc với việc kích hoạt các sự kiện kép lạ. Điều này là không cần thiết anyway, kể từ khi bạn có hiệu quả có thể lấy các sự kiện thả từ các sự kiện sắp xếp được cho rằng bạn đã liên kết nó với draggable.

Một điều khác cần lưu ý - nó đã đẹp hơn để sử dụng sự kiện của sắp xếp được receive thay vì stop (kể từ khi ngừng bị sa thải mỗi khi bất kỳ phân loại dừng & nhận là đặc biệt đó để bắn khi bạn thả một mục mới vào danh sách sắp xếp), nhưng nó không hoạt động đúng vì item chưa được thêm vào danh sách có thể sắp xếp, do đó bạn không thể thay đổi danh sách tại thời điểm đó. Nó hoạt động ok trên dừng lại đơn giản bởi vì không có mục nào khác có thể sắp xếp có lớp elemtxt.