«Цепочка» на перетаскиваемый вызов, чтобы включить сенсорный функционал - PullRequest
Новая
       24

«Цепочка» на перетаскиваемый вызов, чтобы включить сенсорный функционал

2 голосов
/ 15 июня 2011

Я очень новичок в 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;
     },

... и т. Д.

Я видел этот пост: Как я могу сделать JQuery UI 'draggable ()' div перетаскиваемым для сенсорного экрана? , и это выглядит как идеальное решение для того, что я пытаюсьделать, но я не уверен, что подразумевается под "связать это с моим вызовом draggable () пользовательского интерфейса jQuery".Куда в моем коде должен идти блок: 

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

?Это может быть глупый вопрос, извините.Я новичок!:) Спасибо !!

1 Ответ

1 голос
/ 15 июня 2011

Ну, цепочка работает так, представьте, что у вас есть следующий код: 

$('#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(...);
...