Question

好的，我已经玩了好几个小时了，现在仍然没有骰子。我正在创建一个界面，允许您拖放图标（带有图像的div）。我正在使用jQuery UI scripts，因为他们已经尝试并测试了div拖动功能。

我的问题是你不能在它的父div之外拖动一个div。为了解决这个问题，我正在创建一个可拖动的div，当用户触发mousedown事件时，可以根据需要附加到文档正文。但我无法弄清楚如何触发所需的拖动事件，以便用户可以立即开始拖动这个新创建的div。

总之我需要;鼠标按下 - ＆gt;调用函数来创建可拖动的div - ＆gt;在鼠标仍然按下时拖动div。

我确信这很简单。任何帮助将不胜感激。

以下是我的问题的一个示例，它需要运行的是jQuery UI脚本，可以在上面的链接中找到。

<html>
<head>
    <script src="../../jquery-1.6.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.draggable.js"></script>
    <style>
    #inactive_dragable { width: 50px; height: 50px; padding: 0.5em; background-color: green; }
    .test_drag { width: 50px; height: 50px; padding: 0.5em; background-color: red; position: absolute; }
    </style>
    <script>

    function createDraggableDiv(e){     
        if (!e) var e = window.event;   
        jQuery('<div/>', {
            id: 'tester',
        }).appendTo('#page_wrap');      
        var isIE = document.all ? true : false;
        var _x,_y;
        if (!isIE) {
            _x = e.pageX;
            _y = e.pageY;
        }
        if (isIE) {
            _x = e.clientX + document.body.scrollLeft;
            _y = e.clientY + document.body.scrollTop;
        }
        var boundry = $('#page_wrap').offset();
        $('#tester').addClass('test_drag');
        $('#tester').html("New div to drag");
        $('#tester').css("top", _y + "px");
        $('#tester').css("left", _x + "px");
        $('#tester').draggable();       
        // Now how do I make the new div immediately start dragging?
        // ...
    }
    </script>
</head>
<body>
<div id="page_wrap">
<div class="demo" style="width: 300px; height: 200px; background-color: blue; overflow-y: auto; overflow-x: hidden;">
<div onmousedown="createDraggableDiv(event);" id="inactive_dragable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
</div>
</body>
</html>

当你点击div我希望能够创建一个新div并立即拖动它。

Answer 1

最终编辑。这是您想要的功能。我不得不经常修改你的代码，但这可以做你想做的事情。你需要将你正在触发的mousedown事件传递给添加的div上的触发器。这是新的jsfiddle

这应该是你的HTML

<html>
<head>  
</head>
<body>
<div id="page_wrap">
<div class="demo" style="width: 300px; height: 200px; background-color: blue; overflow-y: auto; overflow-x: hidden;">
<div id="inactive_dragable" class="ui-widget-content">
    <p>Drag me around</p>
</div>
Lorem ipsum dolor sit amet...</div>
</div>
</body>
</html>

这是你的javascript

$(".demo").mousedown(function (e){
    var isIE = document.all ? true : false;
        var _x,_y;
        if (!isIE) {
            _x = e.pageX;
            _y = e.pageY;
        }
        if (isIE) {
            _x = e.clientX + document.body.scrollLeft;
            _y = e.clientY + document.body.scrollTop;
        }
        var boundry = $('#page_wrap').offset();
        $('<div/>', {
            id: 'tester',
        }).addClass('test_drag')
        .html("New div to drag")
        .css("top", _y + "px")
        .css("left", _x + "px")
        .draggable()                 
        .appendTo('#page_wrap');
        $("#tester").trigger(e); //this is the important line, that triggers the drag
});

你的CSS

#inactive_dragable { width: 50px; height: 50px; padding: 0.5em; background-color: green; }
.test_drag { width: 50px; height: 50px; padding: 0.5em; background-color: red; position: absolute; }

Answer 2

确定。阅读你的评论后，我想我明白你要做什么，但我不认为有一个“开始拖动”方法，我们可以在jquery中使用。

但是这个怎么样，而不是在div A上绑定一个mousedown事件来创建新的div B然后尝试拖动div B，为什么不完全删除mousedown事件并用可拖动的事件替换它，然后触发一些拖动事件开始时的代码。

例如：

$(".selector").draggable({
  appendTo:'body',
  addClasses:'',
  scroll:false,
  start:function(){
    //your code here
    //eg:
    $(this).html('something else');
  }
});

addClasses位可以改变div的外观，start事件可以触发一些代码来改变div A（你现在正在拖动），使其看起来像你想要的div B.

编辑：滚动：false位应解决您使用“overflow：auto”父div的问题。

它的一些解决方法，但应该给你你的功能（假设我这次正确理解你!!）

Answer 3

上述答案更好，因为他们正在讨论正确的方法。但是，要真正回答你的问题，你可以触发mousedown事件......

$("div#divID").trigger("mousedown");

Answer 4

创建要拖动的克隆的概念已在可拖动插件中实现。您应该像这样使用它：

$('#tester').draggable({helper: 'clone', appendTo: 'body'});

appendTo选项表示您希望创建帮助程序的元素

您可以在dragstart上隐藏您最初拖动的对象（如果您愿意，可以将其保留在那里）这是我作为样本制作的一个jsFiddle：http://jsfiddle.net/HnpbX/6/

如果要实现将元素从一个容器拖放到另一个容器的功能，则应将droppable与draggable结合使用

jQuery如何在鼠标仍处于运行状态时触发拖动事件

4 个答案: