在 Jquery 中使新的 Div 可拖动

Question

我试图让jquery添加新的div，然后使其可拖动，但我一直在尝试并在谷歌上查找，但我找不到任何东西，下面是我的代码

 $(document).ready(function() {

 $("#draggable").draggable({ 
   containment: 'parent',
   handle: 'drag_border',
   drag: function(e, ui) {
          var top = ui.position.top;
          var left = ui.position.left;
          $("#top").html(top);
          $("#left").html(left);
           }
       }); 
   });

       function New_Text() {   
            $("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border"); 
              }

谢谢你

Answer 1

如果您使用的是 jQuery UI，则创建您的元素并使其可拖动：

$("<div />").draggable();

Answer 2

这里的问题是，您在尝试使其可拖动后才创建 DIV。

jQuery 事件仅适用于 Javascript 运行时存在的元素 - 有一些方法可以使用

live

和

delegate

函数来解决这个问题 - 但看起来你的插件不允许这样做。

因此，如果该代码需要保持不变，请将创建 DIV 的位移动到可拖动函数上方 - 这样就可以工作了。

Answer 3

我还没有尝试过，但这应该有效：

function New_Text() {   
  $("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border"); 
        setTimeout(function() {
           ...
          });

         }, 10);
   }

你要创建div，让浏览器将其添加到DOM树中，然后调用

draggable

函数。

Answer 4

由于有些人在这里提到了

draggable()

函数，这是一个 jQuery UI 函数，这里有一个简短的操作方法：

将以下行（对 jQuery UI 的引用）添加到 .html 页面的头部或正文底部：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

现在，要使 #draggable 可拖动，您可以在脚本中编写（您的脚本或对它的引用必须位于对 jQuery UI 的引用之后）：

$('#draggable').draggable()

Answer 5

如果您没有 jquery UI，那么以下解决方案将有所帮助。 jquery-ui 由于我的项目 jquery 版本而导致问题，因此我必须实现一个自定义方法来处理该问题。这是我为使 jquery numpad 可拖动而完成的解决方案。

$('.selector').drags();

$.fn.drags = function (opt) {
opt = $.extend({ handle: "" }, 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 ($(e.target).hasClass(".inner-elements-prevent-draggable")) {
        return; // Don't activate drag for elements with the (sometimes  inner element also becomes draggable if you handling a bootstrap package for modal or something else to prevent that you can specify here)
    }
    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', 2000).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); // you can also set custom z index when drag events happen
        });
    });
    e.preventDefault(); // disable selection
}).on("mouseup", function () {
    if (opt.handle === "") {
        $(this).removeClass('draggable');
    } else {
        $(this).removeClass('active-handle').parent().removeClass('draggable');
    }
});

}