Jquery với khả năng kéo có thể kéo và có thể thay đổi kích thước không hoạt động như mong đợi

Question

JQueryUI Có thể kéo được bên trong Có thể thay đổi kích thước không hoạt động được. Ý tưởng là để có thể kéo các yếu tố được kéo và thả xuống div với thay đổi kích thước cho các phần tử bị bỏ.

đang làm việc: http://jsfiddle.net/lukaszjg/GvDLh/

Hướng dẫn để tái tạo vấn đề:

1. Kéo "kéo tôi" đến "nơi để thả"
   1. Hãy thử thay đổi kích thước
   2. Cố gắng kéo yếu tố kéo bên trong "vị trí để thả"
   3. Thử kích thước lại phần tử đã kéo - không hoạt động như mong đợi

Vui lòng tìm mã bên dưới nơi #dragme và #droppable tham chiếu đến div tương ứng. Bất kỳ ide làm thế nào để sửa chữa nó?

$("#dragme").draggable({ 
helper: 'clone', 
cursor: 'move', 
tolerance: 'fit' 

}); 

var x = null; 
$("#droppable").droppable({ 
drop: function(e, ui) { 

x = ui.helper.clone(); 

x.draggable({ 
helper: 'original', 
containment: '#droppable', 
tolerance: 'fit' 
}); 

x.resizable(); 
x.appendTo('#droppable'); 
ui.helper.remove(); 
} 
}); 

Answer 1

Khi bạn liên kết tiện ích có thể thay đổi kích thước thành phần tử, nó sẽ thêm một số yếu tố <div class="ui-resizable-handle">. Sau đó, bên trong drop callback của bạn, bạn có điều này:

x = ui.helper.clone(); 

Đó sẽ clone .ui-resizable-handle yếu tố cũng như các yếu tố mà bạn muốn sao chép. Và sau đó một vài dòng sau, bạn có:

x.resizable(); 

Dường như cuộc gọi bị nhầm lẫn với sự hiện diện của các yếu tố .ui-resizeable-handle; nó sẽ kết thúc bằng cách thêm một tập hợp các yếu tố .ui-resizeable-handle nhưng chúng sẽ không hoạt động vì các vấn đề về chỉ mục z: bản gốc sẽ (có thể) ở trên chúng và chặn tất cả các sự kiện không nhận các phần tử .ui-resiable-handle gắn liền với họ. Nếu bạn tự loại bỏ các vi phạm <div> s trước khi thực hiện thay đổi kích thước clone: ​​

x.find('.ui-resizable-handle').remove(); 
x.resizable(); 

Sau đó, nó hoạt động:

$("#droppable").droppable({ 
    drop: function(e, ui) { 
     x = ui.helper.clone(); 
     x.draggable({ 
      helper: 'original', 
      containment: '#droppable', 
      tolerance: 'fit' 
     }); 
     x.find('.ui-resizable-handle').remove(); 
     x.resizable(); 
     x.appendTo('#droppable'); 
     ui.helper.remove(); 
    } 
}); 

fiddle Cập nhật: http://jsfiddle.net/ambiguous/xZECa/

Chỉ cần gọi x.resizable('destroy') để làm sạch nó lên không làm việc vì x không thể thay đổi kích thước nên không có gì xảy ra.

Nên có cách tốt hơn để thực hiện công việc này nhưng tôi chưa biết nó là gì.

Answer 2

Tôi đã gặp một số rắc rối khi thử nghiệm giải pháp của bạn nhưng bạn đặt tôi trên đường để tôi sẽ mô tả sự cố và giải pháp của tôi nếu điều này giúp người khác.

Trường hợp của tôi: Lập kế hoạch với các div có thể phân tách đại diện cho từng nhân viên và các div có thể kéo lại, có thể thay đổi đại diện cho các tác vụ.

Vấn đề: Khá giống nhau, chỉ có "nhiệm vụ" của tôi đã là con của phân đoạn (xuất phát từ cơ sở dữ liệu) và có rất nhiều thứ .data() để nhân bản là một mớ hỗn độn. Sự kiện thả có thể phân hủy ném lỗi "không thể chuyển đổi đối số javascript" và hủy hoại ứng dụng của tôi chặn bất kỳ thao tác kéo nào nữa.

Sau khi nhìn thấy giải pháp của bạn và thất bại trong việc tái tạo nó trong trường hợp của tôi, tôi quay trở lại vấn đề cơ bản:

"Nếu bạn có một chỉ số IQ Lumberjack sử dụng một Axe".

Vì vậy, đây là những thứ:

$("#dragme").draggable({ 
helper: 'original', //Needed in my case 
cursor: 'move', 
tolerance: 'fit', 

start: function(event,ui){ 
$(this).resizable("destroy");/* The resizable generates troubles to the droppable? 
Well let's remove the problem... 
*/ 
} 

}).resizable({ 
/*All my functions to apply to the task when resized*/ 

});// I'm creating the resizable immediately because needed to attribute more or less time to the task 


$("#droppable").droppable({ 
drop: function(e, ui) { 
/*All my drop functions to manage the task*/ 

//creating the resizable again PROBLEM SOLVED 
$(ui.draggable).resizable({ 
/*All my functions to apply to the task when resized*/ 
}); 

} 
}); 

Hy vọng điều này có thể giúp

Lưu ý: Không phải rất chắc chắn về trình độ tiếng Anh của tôi vì vậy trong trường hợp sai lầm o lỗi chính tả xin vui lòng tham khảo phần "Back to Basics" và tha thứ cho tôi ;-).

Answer 3

Khi bạn đính kèm ".resizable()" với phần tử đầu tiên phá hủy sự kiện và sau đó đính kèm. nó sẽ hoạt động. // $ (ele) là một đối tượng.

 


    $(ele).resizable().resizable("destroy"); 
     $(ele).draggable(); 
     $(ele).resizable({ 
      animate: 'true', 
      ghost: 'true', 
      handles: 'ne, nw, se, sw', 
    });