javascript - 如何让 'button' 在 MouseDown 上创建一个可移动的 DIV，并将 'MouseDown' 切换到新的 DIV？

Question

所以我还没有开始写这些，所以为了清楚起见，我会尽我最大的努力把一些伪代码放在一起——但这里的想法是用户会点击并按住一个“按钮” (最终可能不会成为一个实际的按钮)，然后生成一个可移动的 DIV。一旦创建了 DIV(无论鼠标当时在哪里，可能会稍微偏移一点，以便鼠标在 div 内)，我想将我的“保持焦点”切换到新的可移动 DIV，以便它可以位于屏幕上；届时我将对 DIV 执行一些其他操作 - 但在这一点之后，其余部分与问题无关。

事实上，不完整的伪代码——这大致就是我所追求的；我相信我最大的问题是如何真正改变我的抓取焦点。

<script>
function NewDiv()
{
   NewDiv = CreateDiv(MouseX, MouseY);
   GrabDiv(NewDiv);
}

function CreateDiv(X, Y)
{
    // DOM for a new DIV... I've got this part covered...
    // JQuery for Movable - Covered
    NewDiv.style.left=(X - 3) + "px";
    NewDiv.style.top=(Y - 3) + "px";

    return NewDiv;
}

function GrabDiv(Div)
{
    // Here's the question...

    // Div.Focus? - While the mouse is still down, I might think this would work?
    // Div.onMouseDown? - Buuuuuut... Is that going to interact with the mouse properly?
}

</script>

<input type='button' onMouseDown='NewDiv();' value="Spawn a new Div" />

现在 - 再一次，真正的问题是“GrabDiv”功能的“正确”方法是什么。非常感谢任何反馈；如果我需要详细说明，我很乐意。

-- 看起来可能至少有一篇关于类似内容的其他帖子；有一个相当复杂的答案。也许这个小颠簸会鼓励一个新的答案。希望。

Answer 1

您在其他地方看到过这种方法吗？

我会考虑使用 jQuery-UI 的拖放功能。

编辑:我想它确实有效。我会使用这个 jsbin 作为起点:http://jsbin.com/deyovunaxe/2/edit