Draggable SimpleModal Popup

Question

Для JQuery Eric Martin's SimpleModal 1.4.1 Я бы хотел, чтобы всплывающее окно было перетаскиваемо, поэтому я попробовал это $ ('# basic-modal-content'). Modal ({ onShow: function (dialog) {
dialog.container.draggable ({handle: 'div'}); } });

всплывающее окно отображает, но я получаю ошибку «Объект не поддерживает свойство метода»

У меня есть JQuery-щ-1.8.10 добавлен в качестве исх сценария и класс = "щ-widget- контента "в div.

Идеи?

---

EDIT: удаление ручки: «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!

EDIT: У меня есть код ввода, который я использую.

Answer 2

Если вам не нужно использовать библиотеку пользовательского интерфейса JQuery, вы можете использовать следующий код, который я нашел на 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 плагин, как в следующем: исх: 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); 

Обе части кода довольно много подключи и играй.