jQuery ui拖动元素，而无需按住鼠标键(跟随光标) [英] jquery ui drag element without keeping mouse button down (follow the cursor)

问题描述

我试图在不按住鼠标键的情况下拖动元素.

我想要的行为是:

1. 我点击了可拖动项
2. 在不按住鼠标左键的情况下拖动我的物品:只需将鼠标作为光标
3. 我点击了一个可放下的容器，以确认并添加我的物品

如果我在开始事件后添加alert框，则可以模拟这种行为.

    start : function(){
        alert('test')
    },

这是小提琴: http://jsfiddle.net/QvRjL/103/

如何在没有警报框的情况下对此行为进行编码?

解决方案

以下是解决此问题的好方法: http://jsfiddle.net/VXbpu/1/

http://jsfiddle.net/vPruR/70/

var click = false;

$(document).bind('mousemove', function (e) {
    if (click == true) {
        $('#your_div_id').css({
            left: e.pageX,
            top: e.pageY
        });
    }
});

$('#your_div_id').click(function() {
    click = !click;
    return false;
});

$('html').click(function() {
    click = false;
});

I am trying to drag an element without keeping the mouse button down.

The behavior I would like is :

1. I click on a draggable item
2. Drag my item without keeping mouse left click down : just follow the mouse as a cursor
3. I click on a droppable container to confirm and append my item

I am able to simulate this behavior if I add an alert box durring the start event.

    start : function(){
        alert('test')
    },

Here is the fiddle : http://jsfiddle.net/QvRjL/103/

How is it possible to code this behavior without the alert box?

解决方案

Here is a good solution about this problem : Trigger Click-and-Hold Event

http://jsfiddle.net/VXbpu/1/

http://jsfiddle.net/vPruR/70/

var click = false;

$(document).bind('mousemove', function (e) {
    if (click == true) {
        $('#your_div_id').css({
            left: e.pageX,
            top: e.pageY
        });
    }
});

$('#your_div_id').click(function() {
    click = !click;
    return false;
});

$('html').click(function() {
    click = false;
});

这篇关于jQuery ui拖动元素，而无需按住鼠标键(跟随光标)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！