Question

我有一个脚本，可以让我在div中拖动一些内容。

但是因为你可以拖动，无论你把光标放在div中，我都无法在文本字段中输入一些文本。

是否可以允许？

我可以每天点击div容器中的链接。但不是在html输入字段中输入文本。

这是javascript：

$(document).ready(function () {

$('#roadmap').mousedown(function (event) {
    $(this)
    .data('down', true)
    .data('x', event.clientX)
    .data('scrollLeft', this.scrollLeft);

    return false;
}).mouseup(function (event) {
    $(this).data('down', false);
}).mousemove(function (event) {
    if ($(this).data('down') == true) {
        this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
    }
}).mousewheel(function (event, delta) {
    this.scrollLeft -= (delta * 30);
}).css({
    'overflow': 'hidden',
    'cursor': 'col-resize'
});
});
$(window).mouseout(function (event) {
    if ($('#roadmap').data('down')) {
        try {
            if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
                $('#roadmap').data('down', false);
            }
        } catch (e) { }
    }
});

这是我的扩展鼠标滚轮功能（如果需要）

(function ($) {

    $.event.special.mousewheel = {
        setup: function () {
            var handler = $.event.special.mousewheel.handler;

            // Fix pageX, pageY, clientX and clientY for mozilla
            if ($.browser.mozilla)
                $(this).bind('mousemove.mousewheel', function (event) {
                    $.data(this, 'mwcursorposdata', {
                        pageX: event.pageX,
                        pageY: event.pageY,
                        clientX: event.clientX,
                        clientY: event.clientY
                    });
                });

            if (this.addEventListener)
                this.addEventListener(($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
            else
                this.onmousewheel = handler;
        },

        teardown: function () {
            var handler = $.event.special.mousewheel.handler;

            $(this).unbind('mousemove.mousewheel');

            if (this.removeEventListener)
                this.removeEventListener(($.browser.mozilla ? 'DOMMouseScroll' : 'mousewheel'), handler, false);
            else
                this.onmousewheel = function () { };

            $.removeData(this, 'mwcursorposdata');
        },

        handler: function (event) {
            var args = Array.prototype.slice.call(arguments, 1);

            event = $.event.fix(event || window.event);
            // Get correct pageX, pageY, clientX and clientY for mozilla
            $.extend(event, $.data(this, 'mwcursorposdata') || {});
            var delta = 0, returnValue = true;

            if (event.wheelDelta) delta = event.wheelDelta / 120;
            if (event.detail) delta = -event.detail / 3;
            if ($.browser.opera) delta = -event.wheelDelta;

            event.data = event.data || {};
            event.type = "mousewheel";

            // Add delta to the front of the arguments
            args.unshift(delta);
            // Add event to the front of the arguments
            args.unshift(event);

            return $.event.handle.apply(this, args);
        }
    };

    $.fn.extend({
        mousewheel: function (fn) {
            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
        },

        unmousewheel: function (fn) {
            return this.unbind("mousewheel", fn);
        }
    });

})(jQuery);

这里是HTML

<div id="roadmap">
       <ul>
           <li class="roadmap_description">
             <h2>Welcome</h2>
             <p>Description</p>
           </li>
           <li><h3 class="milestone_name">v. 1.0.2.3</h3>
               <ul>
                    <li class="milestone_item"><a href="#">Title description</a></li>
               </ul>
                <div class="milestone_item_add">
                     <input class="field" name="milestone_item_name" type="text" /><a href="#"><img src="/Intranet/admin/Intranet/css/images/icons/wand.png" alt="Add new" /></a>
                </div>
           </li>
</ul>
    </div>

谢谢。

Answer 1

return false中的mousedown会阻止鼠标按钮执行默认操作，即将焦点放在孩子<input>上。

您可以在event.target函数中测试mousedown以查看它是否为<input>元素，如果是，则只是停止尝试处理它（return或{{1直接）。

如果你想在鼠标位于return true时仍然允许拖动元素，你仍然可以<input>但是在return false的输入上手动调用focus() }。这样做的缺点是用户无法使用拖动来选择部分文本，因为输入通常会允许。

Answer 2

为什么不在设置此项的文本字段中添加鼠标悬停事件：$（this）.data（'down'，false）; ？

无法在html文本字段中输入文本

2 个答案: