[JQUERY] jQuery를 드래그 앤 드롭 라이브 이벤트를 사용하여

jQuery를 드래그 앤 드롭 라이브 이벤트를 사용하여

해결법

1. ---

   1.보이 테크의 솔루션은 완벽하게 나를 위해 일했습니다. 나는 jQuery를 확장하기 위해 그것을 조금 비트를 변경 감아 ...

   보이 테크의 솔루션은 완벽하게 나를 위해 일했습니다. 나는 jQuery를 확장하기 위해 그것을 조금 비트를 변경 감아 ...

   (function ($) {
      $.fn.liveDraggable = function (opts) {
         this.live("mouseover", function() {
            if (!$(this).data("init")) {
               $(this).data("init", true).draggable(opts);
            }
         });
         return this;
      };
   }(jQuery));
   

   지금처럼 호출하는 대신 :

   $(selector).draggable({opts});
   

   ... 바로 사용 :

   $(selector).liveDraggable({opts})
   

2. ---

   2.이것은 완벽하게 나를 위해 일한 코드의 샘플입니다

   이것은 완벽하게 나를 위해 일한 코드의 샘플입니다

   $('.gadgets-column').live('mouseover',function(){
       $(this).draggable();
   });
   

3. ---

   3.이 같은 래퍼 기능을 만들 수 있습니다 :

   이 같은 래퍼 기능을 만들 수 있습니다 :

   function liveDraggable(selector, options){
     jQuery(selector).live("mouseover",function(){
       if (!jQuery(this).data("init")) {
         jQuery(this).data("init", true);
         jQuery(this).draggable(options);
       }
     });
   }
   

   (-) (대신 $의) 내가 jQuery를 (배치 그 이유는 내가 jQuery로 프로토 타입을 사용)

   그리고 지금 대신 $ (선택) .draggable ({OPTS})를 사용 liveDraggable (선택, {OPTS})

4. ---

   4.Stldoug의 코드는 나를 위해 일하지만, 모든 마우스 오버 이벤트에 요소의 .DATA ( "초기화")을 계속 확인 할 필요가 없습니다. "마우스 오버는"항상 트리거되지 않는 마우스가 .live 기능 차기의 요소를 통해 이미 켜져있는 경우 또한, "MouseMove 이벤트"를 사용하는 것이 좋습니다.

   Stldoug의 코드는 나를 위해 일하지만, 모든 마우스 오버 이벤트에 요소의 .DATA ( "초기화")을 계속 확인 할 필요가 없습니다. "마우스 오버는"항상 트리거되지 않는 마우스가 .live 기능 차기의 요소를 통해 이미 켜져있는 경우 또한, "MouseMove 이벤트"를 사용하는 것이 좋습니다.

   (function ($) {
       $.fn.liveDraggable = function (opts) {
           this.live("mousemove", function() {
               $(this).draggable(opts);
           });
       };
   }(jQuery));
   

   여기 당신이 그것을 사용하는 방법은 다음과 같습니다

   $('.thing:not(.ui-draggable)').liveDraggable();
   

   "하지 (.ui-드래그)"당신의 선택에 트릭을 추가하는 것입니다. 이 드래그 될 때 jQuery를 자동으로 요소에 "UI-드래그"클래스를 추가 할 것입니다 때문에, .live 기능은 더 이상을 대상으로하지 않습니다. 즉, 만 트리거가 반복 당신이 주변에 물건을 이동할 때 다른 솔루션과 달리, 한 번 트리거합니다.

   이상적으로, 당신은 단지 "MouseMove 이벤트를".unbind 수 있지만, 불행하게도, .live와 함께 일을하지 않습니다.

5. ---

   5.@ 존과 @jasimmk에서 최상의 답변을 결합 :

   @ 존과 @jasimmk에서 최상의 답변을 결합 :

   .live 사용 :

   $('li:not(.ui-draggable)').live('mouseover',function(){
       $(this).draggable(); // Only called once per li
   });
   

   .live 더 나은 CSTE 연구진 사용, 비록되지 않습니다 :

   $('ul').on('mouseover', 'li:not(.ui-draggable)', function(){
       $(this).draggable();  // Only called once per li
   });
   

   @ 존이 설명했듯이, .ui-드래그 자동 그래서 선택과 그 클래스를 제외하여, 당신은 단지 각 요소에 대해 한 번 호출 될 것이다 드래그 ()를 확인 드래그 방법에 추가됩니다. 그리고 CSTE 연구진을 사용하면 성능이 향상 선택의 범위를 줄일 수 있습니다.

6. ---

   6.예 :

   예 :

   터키어 :

   <div id="diyalogKutusu">
       <div id="diyalog-baslik">..baslik..</div>
       <div id="icerik">..icerik..</div>
   </div>
   
   $(document).on("mouseover", "#diyalogKutusu", function() {
       $(this).draggable({ handle: '#diyalog-baslik' });
   });
   

   영어:

   <div id="dialogBox">
       <div id="dialogBox-title">..title..</div>
       <div id="content">..content..</div>
   </div>
   
   $(document).on("mouseover", "#dialogBox", function() {
       $(this).draggable({ handle: '#dialogBox-title' });
   });
   

   참고 : 대신 라이브 () 또는 위임의 ()에 사용할 수 있습니다. 온 ()는 다른 사람보다 좋은 성능을 가지고

7. ---

   7.

   $("html divs to drag").appendTo("#layoutDiv").draggable(options);
   

   JSFiddle

8. ---

   8.오래된 질문입니다. 그러나 threedubmedia 드래그를 가지고 지원 ( "을"단순히로 알려진 V 1.7로) 라이브와 플러그인 놓습니다. http://threedubmedia.com/code/event/drop 나는 등 그 성능을 설명 합리적인 보이는 할 수 있도록 많은 그것을 사용하지 않았습니다.

   오래된 질문입니다. 그러나 threedubmedia 드래그를 가지고 지원 ( "을"단순히로 알려진 V 1.7로) 라이브와 플러그인 놓습니다. http://threedubmedia.com/code/event/drop 나는 등 그 성능을 설명 합리적인 보이는 할 수 있도록 많은 그것을 사용하지 않았습니다.

9. ---

   9.또 다른 옵션과 같이, 이동식 클래스와 마우스를 두었 핸들러를 혼합하는 것입니다 :

   또 다른 옵션과 같이, 이동식 클래스와 마우스를 두었 핸들러를 혼합하는 것입니다 :

   $('.outer-container').on('mouseover', '.my-draggable.drag-unbound', function(e) {
     $(this).draggable().removeClass('drag-unbound');
   });
   

   그것은 매우 간단이고 다른 답변이 마우스 오버 당신으로 반복해서 재 - 바인딩이있는 몇 가지 문제를 해결합니다.

10. ---

    10.가되지 않습니다으로 라이브 사용하지 않는 업데이트 된 버전 :

    가되지 않습니다으로 라이브 사용하지 않는 업데이트 된 버전 :

    function liveDraggable(selector, options) {
        $(document).on('mouseover', selector, function () {
            if (!$(this).data("init")) {
                $(this).data("init", true);
                $(this).draggable(options);
            }
        });
    }
    

from https://stackoverflow.com/questions/1805210/jquery-drag-and-drop-using-live-events by cc-by-sa and MIT license