사용자 정의 함수에서 Jquery-UI 드래그 가능 이벤트에 액세스

Question

"doIt"이라고하는 내 사용자 정의 함수는 클래스 또는 ID에서 누군가가 .doIt()을 호출 할 수 있도록 허용하며,이 경우 백그라운드 색상을 빨간색으로 만듭니다 그런 다음 요소를 드래그 할 수있게 만듭니다. (이것은 나의 첫번째 시도이므로 좋게하십시오).

(function($) { 
    $.fn.doIt = function(customOptions) { 
     var options = $.extend({}, $.fn.doIt.defaultOptions, customOptions); 
     return this.each(function() { 
     var $this = $(this); 
     $this.on('click', function(e){ 
      e.preventDefault(); 
      $this.css("background-color", options.color); 
      $this.draggable(); 
     }); 
     }); 
    }; 
    $.fn.doIt.defaultOptions = { 
    color: "#000" 
    };    
})(jQuery); 

제 기능을 드래그 할 요소가 나는 같은 이벤트에 액세스 할 수 있도록 드래그가 정지했을 때 그래서 사용자가 원하는 예를 들어 '정지'처럼 드래그하는 공동 이벤트의 일부를 사용하고 싶습니다 만들기 때문에/콜센터의 정보를 중지합니다.

그러나 내 기능에서 드래그 할 수있는 정지 이벤트와 어떻게 상호 작용할 수 있습니까? 보고 기대

무엇 임 somethign 같은 것입니다 :

$("div#test").doIt({ 
    color: "#ffeeaa", 
    stop: function(e, ui){ 

     //interact with draggable event/ui here. 
     //So 'e' and 'ui' would return me what the 'stop' event from draggable would normall return. 

    } 
}); 

이 어떻게 아니면 내가 잘못 짚었하고 수 있습니까?

Answer 1

jQuery에 옵션을 전달하면됩니다. 분명히 jQuery가 사용하는 것 이상으로 옵션을 정의하고 있으므로 jQuery가 신경 쓰지 않는 옵션을 걸러 내고 싶지만 아마 할 필요는 없다고 확신 할 수있다. jQuery는 사용하지 않는 속성을 무시합니다.

따라서 특별히 stop 이벤트에 연결하려고합니다. 이것에

$this.draggable(); 

:이 작업을 수행하려면이 줄을 변경

$this.draggable({ 
    stop: customOptions.stop // Get the callback defined in custom options 
}); 

당신은 아마 할 수있는 사용자 지정 옵션과 jQuery를 정의하는 옵션을 사이에 이름 충돌이없는 경우 이 :

$this.draggable(customOptions); 

jQuery를이 사용자가 드래그 ELE를 끌어 중단되면 (그것에 event 및 ui 매개 변수를 전달) 함수를 호출합니다 ment.