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-widget-コンテンツ "を除外します。

アイデア？

---

EDIT：ハンドルを削除する：「DIV」は何も新しい、同じエラーが、これらの2つのをしない作品、エラー「オブジェクトがメソッドのプロパティをサポートしていません」

をダイアログ

を移動することはできませんありません。

$('#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要素を指す必要があります！

EDIT：私が使用するエントリコードを追加しました。

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

コードの両方の部分はかなりプラグアンドプレイです。