2009-02-11 31 views
51

Tôi đang sử dụng giao diện người dùng JQuery tuyệt vời để thực hiện "ánh xạ" để người dùng có thể "lập bản đồ" người từ một chương trình cho những người từ chương trình khác.Làm thế nào để vẽ một đường giữa có thể kéo và có thể phân tách?

sử dụng JQuery này đơn giản:

$(document).ready(function() { 
    $("div .draggable").draggable({ 
     revert: 'valid', 
     snap: false 
    }); 

    $("div .droppable").droppable({ 
     hoverClass: 'ui-state-hover', 
     helper: 'clone', 
     cursor: 'move', 
     drop: function(event, ui) { 
      $(this) 
       .addClass('ui-state-highlight') 
       .find("img") 
       .removeAttr("src") 
       .attr("src", "_assets/img/icons/check-user-48x48.png"); 

      $(this).droppable('disable'); 

      $(ui.draggable) 
       .addClass('ui-state-highlight') 
       .find("img") 
       .removeAttr("src") 
       .attr("src", "_assets/img/icons/check-user-48x48.png"); 

      $(ui.draggable).draggable('disable'); 
     } 
    }); 

    $("div .droppable").bind("dblclick", function() { 
     $(this) 
      .removeClass('ui-state-highlight') 
      .find("img") 
      .removeAttr("src") 
      .attr("src", "_assets/img/icons/user-48x48.png"); 
     $(this).droppable('enable'); 

     EnableSource($(this)); 
    }); 
}); 

tôi nhận được như sau:

alt text

những gì tôi thực sự muốn là (nếu có thể) tạo ra một ranh giới giữa ElsaKjell để nó làm cho kết nối giữa chúng rõ ràng.

Tôi luôn có thể làm điều đó với các số bên trong các hộp, nhưng tôi thực sự muốn biết cách thực hiện việc này bằng các dòng.

Cảm ơn.

Trả lời

63
  • cập nhật (08.Jul.2013) Cập nhật với các phiên bản thư viện mới nhất; html được tái cấu trúc bằng JsRender;
  • được cập nhật (29.Sep.2011) Đã thêm GIT Repo; làm sạch mã; cập nhật lên phiên bản khung mới nhất;
  • được cập nhật (03.Mar.2013) Các liên kết cố định với ví dụ hoạt động;

dụ hiện tại sử dụng:

  • HTML 5 DOCTYPE
  • jQuery v.1.10.2
  • jQuery UI v.1.10.3
  • Raphael v.2.0.1
  • JsRender v.1pre35 (tùy chọn, được sử dụng để đơn giản hóa HTML)

Nguồn

Source code in Git Repository

Demo

Page demo at JSBIN


Hoạt động trên FF, IE, Chrome, SafariOpera.

thử nghiệm trên:

  • Firefox 6 và 7 .. 22
  • IE 8 và 9 .. 10
  • Chrome 12 + .. 27
  • Safari 5+ .. 6
  • Opera 11.51 .. 15

để cho bạn thấy tất cả, tôi vừa tạo một bản demo nhỏ về thành tích của tôi (Tôi tự hào mỗi con trai ngày nay):

Video demo

và một hình ảnh nhỏ:

alt text

+0

bất kỳ tiến trình nào khi thực hiện công việc này trong IE? –

+0

chỉ khi bạn sử dụng Silverlight: (không hỗ trợ SVG trong IE8, chỉ trong FF – balexandre

+0

Không hoạt động trong Safari/Chrome/Webkit ... – duckyflip

5

Tôi quá mới để gửi một liên kết nhưng nếu bạn google "Thư viện cho các bản vẽ đơn giản với jQuery ", bạn có thể tìm thấy những gì bạn đang tìm kiếm. :)

link here

+0

Tuyệt vời, cảm ơn bạn :) Tôi không biết đó là phiên bản SVG mới ... – balexandre

+0

Tôi googled, trang này là tài liệu tham khảo đầu tiên về những gì tôi thực sự đã có trong tâm trí, mmm, cảm ơn bạn @balexandre – Ayyash

Các vấn đề liên quan