Question

我有这段代码http://jsfiddle.net/xNHKP/6/（由于某种原因我没有在小提琴中工作，但它在我的网站上有效 - http://bit.ly/JV5I0Z）

我想要的是可以拖动联系表单（点击最后一个菜单项使其显示），但当有人拖动或点击文本字段时，它们不会获得焦点，因此您无法输入它们。具有讽刺意味的是，它适用于Internet Explorer。

那么如何在点击时让字段获得焦点？我不介意让它们不可拖动。

由于

编辑：下面的代码（尽量保持简单，只包括相关内容）

dragDrop = {
initialMouseX: undefined,
initialMouseY: undefined,
startX: undefined,
startY: undefined,
draggedObject: undefined,

initElement: function (element) {
    if (typeof element == 'string')
        element = document.getElementById(element);
    element.onmousedown = dragDrop.startDragMouse;
}}

<form id="contactForm" onSubmit="return sendMail();">
  <textarea id="message" rows="8"></textarea>
</form>

<script type="text/javascript">
  dragDrop.initElement(document.getElementById('contactForm'));
</script>

Answer 1

好的，所以这里有一个答案：你只需要检查它是被拖动的形式而不是其他任何内部元素，所以只需编辑你的代码：

dragDrop.startDragMouse = function(e) {
    dragDrop.startDrag(this);
    var evt = e || window.event;

    // Now check it's the correct element we're dealing with
    if(evt.target.id==="contactForm") {
        dragDrop.initialMouseX = evt.clientX;
        dragDrop.initialMouseY = evt.clientY;
        addEventSimple(document,'mousemove',dragDrop.dragMouse);
        addEventSimple(document,'mouseup',dragDrop.releaseElement);
    }

    return false;
}

Answer 2

好吧，好像你正在努力解决这个问题，考虑到你想要的，我会做什么呢？

将addEventlistener添加到表单中，使其不会冒泡，因此如果单击内部元素则不会触发。
让每一个内在元素像往常一样过着它的生活，不要试图在它们上面添加杂乱的事件。

如果你真的想要/需要用户能够通过拖动标签或某物来拖动表单，那么你应该明确地过滤掉可拖动元素。然后你可以回到冒泡事件并过滤掉那些不可拖动的东西。如果它不可拖动，除了返回之外不要做任何其他事情，这样你就不会有文本选择的麻烦。

Here's a fiddle

Answer 3

在Firebug中，我可以看到，只要您单击一个表单元素，它就会为表单分配一个“拖动”类，当释放鼠标按钮时，该类将被删除。当按下鼠标按钮并移动鼠标时，您需要指定“拖动”类。

Answer 4

好吧，如果你不介意让表单弹出窗口不可拖动，你只需要完全删除dragDrop的东西。我正在看你的代码，看看有什么不对，但我想这是关于事件冒泡的事情，你似乎没有[似乎]处理

Answer 5

好的，现在你想要能够拖放许多元素吗？ Here's another fiddle showing you how you can do multiple html element drag'n'drop

你仍然需要稍微改进一下这个例子（记住，相对鼠标位置？现在你可能也希望微调z-index处理）。

我建议你学习jQuery或任何等效的javascript库，它会对你有所帮助。

来自法国的欢呼！

Javascript表单字段不可点击

5 个答案: