Draggable SimpleModal Popup

Question

Jquery의 경우 Eric Martin의 SimpleModal 1.4.1 팝업을 드래그 할 수 있도록하여주세요. $ ('# 기본 모달 콘텐츠') 모달 ({ onShow : function (대화 상자) {
dialog.container.draggable ({handle : 'div'}); } });

팝업 표시하지만 "=

을"방법의 속성을 지원하지 않는 개체 "나는 JQuery와-UI-1.8.10 스크립트 심판 및 클래스로 추가있어의 오류가 발생 UI-widget- 콘텐츠 "div.

아이디어가 있으십니까?

---

편집 : 제거 핸들 : 'DIV'는 오류

을 "개체는 방법의 속성을 지원하지 않습니다"아무것도 새로운, 같은 오류가 대화

이 두 가지가 하지 일을 이동할 수 없습니다 않습니다

$('#basic-modal-content').modal({ 
     onShow: function(dialog) { $(dialog.container).draggable(); } 
    }); 


    $('#basic-modal-content').modal({ 
     onShow: function(dialog) { $(dialog.container).draggable({handle: 'div'}); } 
    }); 

console.log($(dialog.container)); 
Result :[object Object] 

Answer 1

안녕 내 코멘트 : 확인이를 사용

jQuery(function ($) { 
    // Load dialog on page load 
    //$('#basic-modal-content').modal(); 

    // Load dialog on click 
    $('#basic-modal .basic').click(function (e) { 
     $('#basic-modal-content').modal({ 
      onShow: function(dialog) { 
       console.log($(dialog)); 

       $(dialog.container).draggable(); 
      } 
     }); 

     return false; 
    }); 
}); 

DOM 요소를 가리켜 야합니다!

편집 : 내가 사용하는 입력 코드를 추가했습니다.

Answer 2

실제로 JQuery UI 라이브러리를 사용할 필요가없는 경우 jsfiddle에서 찾은 다음 코드를 http://jsfiddle.net/mkUJf/666/ 에 사용할 수 있습니다. "div # modalbox-container"는 아무거나 될 수 있습니다. 방금 모달의 외부 컨테이너를 사용하기로했습니다.

//make modal draggable 
$(function() { 
    $('body').on('mousedown', 'div#modalbox-container', function() { 
     $(this).addClass('draggable').parents().on('mousemove', function (e) { 
      $('.draggable').offset({ 
       top: e.pageY - $('.draggable').outerHeight()/2, 
       left: e.pageX - $('.draggable').outerWidth()/2 
      }).on('mouseup', function() { 
       $(this).removeClass('draggable'); 
      }); 
     }); 
     e.preventDefault(); 
    }).on('mouseup', function() { 
     $('.draggable').removeClass('draggable'); 
    }); 
}); 

또는 다음과 같은 jQuery 플러그인을 추가 할 수 있습니다 REF : 코드의 https://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/

(function($) { 
$.fn.drags = function(opt) { 

    opt = $.extend({handle:"",cursor:"move"}, opt); 

    if(opt.handle === "") { 
     var $el = this; 
    } else { 
     var $el = this.find(opt.handle); 
    } 

    return $el.css('cursor', opt.cursor).on("mousedown", function(e) { 
     if(opt.handle === "") { 
      var $drag = $(this).addClass('draggable'); 
     } else { 
      var $drag = $(this).addClass('active-handle').parent().addClass('draggable'); 
     } 
     var z_idx = $drag.css('z-index'), 
      drg_h = $drag.outerHeight(), 
      drg_w = $drag.outerWidth(), 
      pos_y = $drag.offset().top + drg_h - e.pageY, 
      pos_x = $drag.offset().left + drg_w - e.pageX; 
     $drag.css('z-index', 1000).parents().on("mousemove", function(e) { 
      $('.draggable').offset({ 
       top:e.pageY + pos_y - drg_h, 
       left:e.pageX + pos_x - drg_w 
      }).on("mouseup", function() { 
       $(this).removeClass('draggable').css('z-index', z_idx); 
      }); 
     }); 
     e.preventDefault(); // disable selection 
    }).on("mouseup", function() { 
     if(opt.handle === "") { 
      $(this).removeClass('draggable'); 
     } else { 
      $(this).removeClass('active-handle').parent().removeClass('draggable'); 
     } 
    }); 

} 
})(jQuery); 

두 개는 거의 플러그 앤 플레이.