0

我有这个代码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>
4

3 回答 3

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;
}
于 2012-05-18T08:03:37.697 回答
1

好的，看来您正在为此苦苦挣扎，考虑到您想要什么，我会这样做：

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

If you really want/need the user to be able to drag the form by dragging on a label or something you should explicitely filter what are the draggable elements. Then you can go back to a bubbling event and filter out what's not draggable. If it's not draggable, don't do anything else than a return so you don't have trouble with text selection.

Here's a fiddle

于 2012-05-18T08:56:05.687 回答
0

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

于 2012-05-18T07:50:05.580 回答