Làm thế nào để kết nối các div có thể kéo

Question

Tôi có một số div mà tôi sao chép và có thể kéo và thả trong một khu vực, bây giờ, tôi muốn kết nối bằng các dòng divs và nếu tôi di chuyển các divs, dòng này phải di chuyển quá. Một cái gì đó giống như một sơ đồ dòng chảy, tôi sao chép các div bằng cách kéo và thả, nhưng vẫn không biết làm thế nào để làm những dòng này.

Cảm ơn!

Answer 1

Tôi đã nghĩ về điều này trước đây nhưng tôi chưa bao giờ có nhu cầu thực sự cố thực hiện nó. Hãy thử điều này:

Tạo GIF hoặc PNG trong suốt có đường chéo chạy từ góc này sang góc khác. Khi bạn kéo các div xung quanh, kéo giãn hình ảnh sao cho các góc của nó luôn chạm vào từng div. Có thể bạn sẽ cần một hình ảnh chéo và hình ảnh chéo và chuyển đổi giữa hai hình ảnh dựa trên vị trí tương đối của hai div.

Điều này có thể sẽ mất một số sự khéo léo để làm cho nó hoạt động tốt, nhưng đó là điều tốt nhất mà tôi có thể nghĩ đến để có được đường chéo trong HTML.

Answer 2

• mất hai divs, Diva và divB.

• tính toán khoảng cách ngắn nhất giữa biên giới gần nhất của divs

• xác định tọa độ giữa những bên gần nhất của mỗi div ví dụ:

  A: {x: 10, y: 10}

  B: {x: 20: y: 10}

• xác định giao điểm của đường dây từ những điểm (C) C = AX, BY hoặc AY, BX (tùy theo tính chất ding trên Diva và vị trí divB)

• tạo hai divs, đại diện cho AC và BC

tip:

position:absolute; 
line-height:1px; 
border:solid 1px; 

repaint mỗi khi bạn di chuyển con divs với jquery.

lưu ý: như bạn có thể thấy, luôn có 2 mặt đóng và 2 cạnh xa khi các div không song song.

Answer 3

bạn có thể sử dụng thư viện jsplumb để đạt được điều này. nếu bạn có hai div, div1 và div2,

var endpointOptions = { isSource:true, isTarget:true }; 
var div1Endpoint = jsPlumb.addEndpoint('div1', { anchor:"TopCenter" }, endpointOptions); 
var div2Endpoint = jsPlumb.addEndpoint('div2', { anchor:"BottomCenter" }, endpointOptions); 
jsPlumb.connect({ 
    source:div1Endpoint, 
    target:div2Endpoint, 
    connector: [ "Bezier", 175 ], 
    paintStyle:{ lineWidth:5, strokeStyle:'red' } 
}); 

điều này sẽ thiết lập trình kết nối. nếu div của bạn là di chuyển, sau đó onmove, thực hiện cuộc gọi đến jsPlumb.repaint()

Liên kết tới jsPlumb demo - https://jsplumbtoolkit.com Jsplumb dường như đã được thanh toán ngay bây giờ, (sửa đổi liên kết ở trên). Tuy nhiên họ không có một Community Edition

Community Edition Đây là dự án mã nguồn mở jsPlumb lưu trữ trên GitHub rằng lần đầu tiên được tạo ra vào đầu năm 2010.Đây là một công nghệ lớp xem cung cấp cho bạn một API để thiết lập kết nối giữa các phần tử DOM, cả hai chương trình và thông qua các sự kiện chuột/cảm ứng.

Phiên bản cộng đồng là miễn phí và được cấp phép với giấy phép MIT hoặc GPL2; bạn chọn bất cứ điều gì phù hợp với nhu cầu của bạn.

Toolkit bản Các Toolkit bản kết thúc tốt đẹp phiên bản cộng đồng với một tập trung vào các mô hình dữ liệu cơ bản, cũng như một số tính năng giao diện người dùng hữu ích như bố cục và một widget mà cung cấp chức năng pan/zoom. Nó cung cấp một cách nhanh chóng để xây dựng các ứng dụng với kết nối trực quan ở cốt lõi của họ. Để có cảm nhận tốt hơn về các khả năng của Phiên bản Bộ công cụ, hãy xem qua một số bản trình diễn hoặc đọc kỹ tài liệu.

Phiên bản Bộ công cụ có giấy phép thương mại, mỗi nhà phát triển, với quyền truy cập tùy chọn vào hỗ trợ qua email (cộng với cập nhật cho các phiên bản mới phát hành trong một năm). Điều khoản cấp phép có sẵn tại đây. Vui lòng tham gia và mua giấy phép ngay bây giờ bằng cách sử dụng biểu mẫu này!

Lộ trình cho cả hai phiên bản có thể được xem here.