0

我有一个脚本,可以让我在 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>

谢谢你。

4

2 回答 2

4

return falsein防止鼠标按钮按下具有其mousedown默认操作,即聚焦 child <input>

您可以event.targetmousedown函数中进行测试以查看它是否是<input>元素,如果是,请停止尝试处理它(returnreturn true立即)。

如果您希望在鼠标位于 时仍允许拖动元素<input>,您仍然可以return false手动调用focus()中的输入mousedown。这样做的缺点是用户不能使用拖动来选择部分文本,因为输入通常允许。

于 2010-07-08T13:03:47.983 回答
0

为什么不将鼠标悬停事件添加到设置此的文本字段: $(this).data('down', false); ?

于 2010-07-08T13:05:51.393 回答