“链接”到可拖动的调用以启用触摸功能

Posted 2023-05-08

【中文标题】“链接”到可拖动的调用以启用触摸功能

【英文标题】："Chaining" onto draggable call to enable touch functionality

【发布时间】：2011-09-15 12:12:24

【问题描述】：

我对 jquery ui 非常陌生，但由于我的项目的性质，我有点陷入了困境！基本上我需要帮助的是我有一个文件，该文件将某些自定义项应用于 jquery ui 可拖动小部件，并且我想进一步自定义以启用触摸功能，以便该小部件在移动触摸屏设备上运行。也就是说，我的代码看起来像这样：

/*
 * jQuery UI Draggable
 *
 * Depends:
  *  jquery.ui.core.js
  *  jquery.ui.mouse.js
  *  jquery.ui.widget.js
  */

 (function( $, undefined ) 

 $.widget("ui.draggable", $.ui.mouse, 
     widgetEventPrefix: "drag",
     options: 
         addClasses: true,
         appendTo: "parent",
         axis: false,
         connectToSortable: false,
         containment: false,
         cursor: "auto",
         cursorAt: false,
         grid: false,
         handle: false,
         helper: "original",
         iframeFix: false,
         opacity: false,
         refreshPositions: false,
         revert: false,
         revertDuration: 500,
         scope: "default",
         scroll: true,
         scrollSensitivity: 20,
         scrollSpeed: 20,
         snap: false,
         snapMode: "both",
         snapTolerance: 20,
         stack: false,
         zIndex: false
     ,
     _create: function() 

         if (this.options.helper == 'original' &&      !(/^(?:r|a|f)/).test(this.element.css("position")))
             this.element[0].style.position = 'relative';

         (this.options.addClasses && this.element.addClass("ui-draggable"));
         (this.options.disabled && this.element.addClass("ui-draggable-disabled"));

         this._mouseInit();

     ,

     destroy: function() 
         if(!this.element.data('draggable')) return;
         this.element
             .removeData("draggable")
             .unbind(".draggable")
             .removeClass("ui-draggable"
                 + " ui-draggable-dragging"
                 + " ui-draggable-disabled");
         this._mouseDestroy();

         return this;
     ,

...等等。

我看过这篇文章：How can I make a jQuery UI 'draggable()' div draggable for touchscreen?，它看起来是我正在尝试做的事情的理想解决方案，但我不确定“将其链接到我的 jQuery UI draggable() 是什么意思称呼 ”。在我的代码中应该在哪里阻止：

.touch(
    animate: false,
    sticky: false,
    dragx: true,
    dragy: true,
    rotate: false,
    resort: true,
    scale: false
);

去吗？这可能是一个愚蠢的问题，对不起。我是初学者！ :) 谢谢！！

【参考方案1】：

嗯，链接是这样工作的，假设你有以下代码：

$('#someDiv').show();
$('#someDiv').addClass('someClass');
$('#someDiv').removeClass('someOtherClass');

相反，您可以像这样链接这些调用：

$('#someDiv').show().addClass('someClass').removeClass('someOtherClass');

这是可行的，因为 jQuery 函数之后会返回元素，因此您可以在同一元素或结果元素上“链接”函数调用。

在你的情况下，我相信它应该在调用 $.widget 结束后被链接：

$.widget(...).touch(
    animate: false,
    sticky: false,
    dragx: true,
    dragy: true,
    rotate: false,
    resort: true,
    scale: false
);

或者其他方式可以做到：

$('#yourElement').draggable(...).touch(...);

【讨论】：

太棒了；那么如何包含 jqtouch 插件呢？我下载了文件并保存在同一个目录中，那么java中“include xyz”的javascript版本是什么，我的代码应该放在哪里？

与你包含 jquery 的方式相同...<script type="text/javascript" src="your-plugin.js"></script>