Draggable SimpleModal Popup

Question

对于Jquery Eric Martin的SimpleModal 1.4.1我想弹出窗口是可拖动的，所以我试过这个 $（'＃basic-modal-content'）。modal（onShow：function（dialog） {
dialog.container.draggable（{handle：'div'}）; } }）;

的弹出式窗口，但我得到的“对象不支持方法的财产”

我有jQuery的UI-1.8.10添加为脚本REF和类错误=“UI的小窗口内容“在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容器”可以是任何东西。我只是选择使用模态的外部容器。

//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); 

两个代码段是非常即插即用。