jQuery Safari/Chrome không tương thích với khả năng kéo sở hữu ngăn chặn

Mã này hoạt động trong Firefox, Internet Explorer, không phải trong Safari/Chrome:jQuery Safari/Chrome không tương thích với khả năng kéo sở hữu ngăn chặn

<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="jquery-ui.js"></script> 
    <script> 
     function newDiv() { 
      var div = $('<div id="divNew" style="width: 50px; height: 50px; border: solid 1px; background: Red"></div>'); 
      $('#divParent').append(div); 
      div.draggable(
      { 
       containment: 'parent' 
      }); 
     } 
    </script> 
</head> 
<body> 
    <a href="javascript:;" onclick="newDiv()">new div</a> 
    <div id="divParent" style="width: 500px; height: 500px; border: solid 1px;"></div> 
</body>

Trong Safari/Chrome, divNew chỉ có thể di chuyển theo chiều dọc. Tính năng này của jQuery hiện không tương thích? Tôi đang sử dụng phiên bản 1.5.2 ổn định.Nó có thể tìm thấy ở đây jQuery 1.5.2

Nguồn

2008-11-12 user37122

Hãy thử thay thế 'cha mẹ' bằng đối tượng dom ... tức là $ ("# divParent") và xem có hoạt động không.

Nguồn

2008-11-19 19:17:35

Tôi nghĩ rằng bạn đang đúng –

Hãy thử gói div divarar với div khác, sau đó đặt ngăn chặn div divarar div trong khi tiêm nó vào divParent. Điều này làm việc cho tôi:

<script> 
     function newDiv() { 
      var divs = 
       $(unescape('%3Cdiv class="divNew" style=""%3E&nbsp;%3C/div%3E')); 
      divs.draggable(
      { 
      containment: $('#a') 
      }); 
      $('#divParent').append(divs); 
     } 
    </script> 
</head> 
<body> 
    <style> 
    .divNew {width: 50px; height: 50px;border: solid 1px; background: Red;} 
    #divParent {width: 500px; height: 500px; border: solid 1px;}; 
    </style> 
    <a href="javascript:;" onclick="newDiv()">new div</a> 
    <div id="a"> 
     <div id="divParent" style=""> <!--<div class="divNew"></div>--> 
     </div>  
    </div> 
</body>

EDIT: Tôi vừa nhận ra điều này không hoạt động hoàn toàn. Bạn nên bao gồm một kiểm tra để xem liệu trình duyệt có dựa trên webkit hay không và sau đó đặt vùng chứa thành 1000px thay vì 500px. Lỗi này dường như, rõ ràng, liên quan đến việc tính toán chiều rộng đúng cách.

Nguồn

2009-01-23 21:23:15 jacobangel

Có vẻ như nó liên quan nhiều hơn đến việc tính toán vị trí hơn chiều rộng – yoavf

Tôi đã gặp phải một số vấn đề tương tự, nơi các phần tử có thể kéo của tôi được định vị hoàn toàn và trở nên tương đối có vị trí trong Chrome và Safari. Thêm vào đó quan trọng đối với vị trí phong cách: tuyệt đối thực hiện thủ thuật.

Nguồn

2009-08-25 14:45:35 user162806

Để giải quyết vấn đề này, bạn phải xác định WMODE khác nhau trong suốt. Tôi chỉ cần đặt wmode = window và điều này hoạt động tốt trong tất cả các trình duyệt.

Nguồn

2010-10-05 14:59:05 Marcus

Jquery UI Phương thức có thể kéo sẽ không hoạt động trong môi trường Safari và MAC OS X theo bất kỳ cách nào. Vì vậy, khi viết code xem xét tương tự như:

if(!($browser.safari && navigator.appVersion.indexOf('Mac')!= -1)) { 
    $('div.urid').draggable({ 
     helper: 'clone', 
     opacity: 0.4 
    }); 
}

Khi bạn thực hiện Kéo và Thả xin xem xét cùng ...

Nguồn

2010-12-02 05:51:50 Anes

giải pháp tôi tìm thấy là để thiết lập các yếu tố position: absolute !important, :))

Nguồn

2011-03-12 11:01:16 anjalis

với jquery mới nhất nó vẫn là giải pháp ... –

Và đặt thành phần chính thành vị trí: tương đối; – Luke

Vị trí tuyệt đối gần như đã hoạt động, kiểu trang lộn xộn. Điều này đã làm việc cho tôi http://stackoverflow.com/questions/2483943/jquery-ui-sortable-listitem-jumps-to-top-in-safari-and-chrome –

anjalis đã đúng,

position: absolute !important;

làm việc hoàn hảo cho tôi. Tôi đã có một vấn đề nhỏ của các yếu tố có thể kéo hơi popping ra khỏi container khi bạn phát hành và bấm vào yếu tố. nó sẽ bù đắp nhẹ. với position: absolute !important và phần tử gốc position: relative; nó hoạt động như một sự quyến rũ.

Nguồn

2012-04-08 20:36:59 nathanlampe

jQuery Safari/Chrome không tương thích với khả năng kéo sở hữu ngăn chặn

Trả lời

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