用于触摸设备的Javascript拖放[关闭]

Question

我正在寻找适用于触控设备的拖放插件。

我想要与jQuery UI plugin 类似的功能，它允许“可放置”元素。

jqtouch plugin支持拖拽，不支持拖放。

Here 是拖放，只支持 iPhone/iPad。

谁能给我指出一个适用于 android/ios 的拖放插件的方向？

...或者可能更新 jqtouch 插件以获得可放置性，它已经在 Andriod 和 IOS 上运行。

谢谢！

Answer 1

您可以使用 Jquery UI 进行拖放，并使用附加库将鼠标事件转换为您需要的触摸，我推荐的库是 https://github.com/furf/jquery-ui-touch-punch，这样您从 Jquery UI 的拖放操作应该可以正常工作触摸设备

或者您可以使用我正在使用的这段代码，它还将鼠标事件转换为触摸，它就像魔术一样工作。

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent({
        touchstart: "mousedown",
        touchmove: "mousemove",
        touchend: "mouseup"
    }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}

然后在你的 document.ready 中调用 init() 函数

从Here找到的代码

Answer 2

感谢以上代码！ - 我尝试了几个选项，这就是票。我遇到的问题是 preventDefault 阻止在 ipad 上滚动 - 我现在正在测试可拖动项目，到目前为止效果很好。

if (event.target.id == 'draggable_item' ) {
    event.preventDefault();
}

Answer 3

我有与gregpress answer 相同的解决方案，但我的可拖动项目使用了一个类而不是一个ID。它似乎有效。

var $target = $(event.target);  
if( $target.hasClass('draggable') ) {  
    event.preventDefault();  
}

Answer 4

对于任何希望使用此功能并保留“点击”功能的人（正如 John Landheer 在他的评论中提到的那样），您只需进行几处修改即可：

添加几个全局变量：

var clickms = 100;
var lastTouchDown = -1;

然后把原来的switch语句修改成这样：

var d = new Date();
switch(event.type)
{
    case "touchstart": type = "mousedown"; lastTouchDown = d.getTime(); break;
    case "touchmove": type="mousemove"; lastTouchDown = -1; break;        
    case "touchend": if(lastTouchDown > -1 && (d.getTime() - lastTouchDown) < clickms){lastTouchDown = -1; type="click"; break;} type="mouseup"; break;
    default: return;
}

您可能想根据自己的喜好调整“点击次数”。基本上，它只是观察“touchstart”，然后是“touchend”，以模拟点击。

Answer 5

我知道的旧线程......

@ryuutatsuo 的答案的问题是它还阻止了任何输入或其他必须对“点击”做出反应的元素（例如输入），所以我写了这个解决方案。该解决方案可以在任何触摸设备（或计算机）上使用基于 mousedown、mousemove 和 mouseup 事件的任何现有拖放库。这也是一种跨浏览器的解决方案。

我已经在多种设备上进行了测试，它运行速度很快（结合 ThreeDubMedia 的拖放功能（另请参阅 http://threedubmedia.com/code/event/drag））。它是一个 jQuery 解决方案，因此您只能将它与 jQuery 库一起使用。我使用了 jQuery 1.5.1，因为一些 较新的函数在 IE9 及更高版本中无法正常工作（未使用较新版本的 jQuery 进行测试）。

在之前向事件添加任何拖放操作您必须先调用此函数：

simulateTouchEvents(<object>);

您还可以使用以下语法阻止所有组件/子组件进行输入或加速事件处理：

simulateTouchEvents(<object>, true); // ignore events on childs

这是我写的代码。我使用了一些不错的技巧来加快评估速度（参见代码）。

function simulateTouchEvents(oo,bIgnoreChilds)
{
 if( !$(oo)[0] )
  { return false; }

 if( !window.__touchTypes )
 {
   window.__touchTypes  = {touchstart:'mousedown',touchmove:'mousemove',touchend:'mouseup'};
   window.__touchInputs = {INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,'input':1,'textarea':1,'select':1,'option':1};
 }

$(oo).bind('touchstart touchmove touchend', function(ev)
{
    var bSame = (ev.target == this);
    if( bIgnoreChilds && !bSame )
     { return; }

    var b = (!bSame && ev.target.__ajqmeclk), // Get if object is already tested or input type
        e = ev.originalEvent;
    if( b === true || !e.touches || e.touches.length > 1 || !window.__touchTypes[e.type]  )
     { return; } //allow multi-touch gestures to work

    var oEv = ( !bSame && typeof b != 'boolean')?$(ev.target).data('events'):false,
        b = (!bSame)?(ev.target.__ajqmeclk = oEv?(oEv['click'] || oEv['mousedown'] || oEv['mouseup'] || oEv['mousemove']):false ):false;

    if( b || window.__touchInputs[ev.target.tagName] )
     { return; } //allow default clicks to work (and on inputs)

    // https://developer.mozilla.org/en/DOM/event.initMouseEvent for API
    var touch = e.changedTouches[0], newEvent = document.createEvent("MouseEvent");
    newEvent.initMouseEvent(window.__touchTypes[e.type], true, true, window, 1,
            touch.screenX, touch.screenY,
            touch.clientX, touch.clientY, false,
            false, false, false, 0, null);

    touch.target.dispatchEvent(newEvent);
    e.preventDefault();
    ev.stopImmediatePropagation();
    ev.stopPropagation();
    ev.preventDefault();
});
 return true;
}; 

它的作用： 首先，它将单点触摸事件转换为鼠标事件。它检查事件是否由必须拖动的元素上/中的元素引起。如果它是一个输入元素，如 input、textarea 等，它会跳过翻译，或者如果附加了标准鼠标事件，它也会跳过翻译。

结果： 可拖动元素上的每个元素仍在工作。

快乐的编码，greetz， 欧文·汉杰斯