React-dnd: المس الخلفية

في الواقع! سأبحث في هذا الأسبوع المقبل.

لقد فعلت شيئًا كهذا باستخدام أحداث المؤشر: لا شيء ؛ لذلك يمكن أن تمسك العناصر الموجودة أسفل العنصر الذي يتم سحبه بالماوس فوق الأحداث ؛ أنا مهتم بمعرفة الطرق الأخرى المتاحة لمعالجة هذا الأمر

ما هي أحدث مكتبات السحب والإفلات باستخدام Touchmove؟ jQuery UI؟ نحن بحاجة إلى النظر إلى حل جيد واعتماد حيله.

لم أستخدم أيًا من هذه في المشاريع ولكن Google وجدت:

• http://interactjs.io/
• http://draggabilly.desandro.com/
• https://github.com/dbushell/Nestable
• https://github.com/a5hik/ng-sortable

أعتقد أنه سيكون من الأفضل وبروح هذه المكتبة تجنب أي تلاعب في DOM (مثل libs الشائعة ، سواء عن طريق استنساخ العقدة للمعاينة ، أو تغيير translateX / Y ، وما إلى ذلك) ، وبدلاً من ذلك السماح للمستهلك برسم "طبقة السحب" وإعطاء المستهلك البيانات اللازمة لذلك.

بمعنى آخر ، إذا تم سحب المكون Card باستخدام الواجهة الخلفية باللمس ، فلن يحاول رد فعل dnd بطريقة ما نقله بنفسه. يعود الأمر إليك لعرض بعض مكونات "الطبقة" في الجزء العلوي من التطبيق. سيستخدم هذا المكون DragLayerMixin المقدم من خلال رد فعل-dnd للتعرف على العنصر الحالي ، وموضعه ، وما إلى ذلك. يقرر كيفية عرض العنصر المسحوب بناءً على نوعه وهو رد فعل بنسبة 100٪ أيضًا.

var App = React.createClass({
  render() {
    return (
      <div>
       {this.props.activeRouteHandler />
       <DragDropLayer />
      </div>
    );
  }
});

var { DragLayerMixin } = require('react-dnd');

var DragDropLayer = React.createClass({
  mixins: [DragLayerMixin],

  render() {

    // With non-native dragging backend, rendering items in the process of dragging is your responsibility. 
    // It's up to you to use translate3d or top/left, render thumbnails or real components, etc.

    var {
      draggedItem,
      draggedItemType,
      clientX,
      clientY
    } = this.getDragLayerState(); // provided by mixin

    if (!draggedItem) {
      return null;
    }

    return (
      <div style={{zIndex: 10000, pointerEvents: 'none', position: 'absolute'}}>
        {draggedItem &&
          <div style={{transform: `translate3d(${clientX}, ${clientY}, 0)`}}>
            {this.renderItem(draggedItemType, draggedItem)}
          </div>
        }
      </div>
    );
  },

  renderItem(type, item) {

    // It's completely up to the consumer to specify how to render different types

    switch (type) {
    case ItemTypes.Card:
      return <Card title={item.title} />;
    case ItemTypes.List:
      return <img src='thumbnail.jpg' />;
  }
});

راجع للشغل هذا النهج يفتح إمكانيات رائعة حقًا لأن _بالنسبة لبعض التطبيقات _ سحب الطبقة _ هو ما يحتوي على عناصر قابلة للسحب. لا يجب أن تكون طبقة السحب منفصلة ، على الرغم من إمكانية ذلك ، إذا لزم الأمر.

بالنسبة للتطبيقات التي يتم فيها سحب العناصر على بعض الحاويات ، يمكن لهذه الحاوية استخدام DragLayerMixin وبالتالي التعرف على موضع السحب الحالي وتحريك العناصر الحقيقية عند حدوث السحب:

بالنسبة لتطبيقات مثل Trello حيث يتم سحب العناصر عبر الشاشة عبر حاويات مختلفة ، قد يكون من المفيد أن يكون لديك مكون مستوى أعلى منفصل باستخدام DragLayerMixin لعرض العنصر الذي تم سحبه بشكل مطلق حاليًا.

هذا يجعل الكثير من معانيها. يجب أن يكون أي متصفح تقريبًا ، سواء أكان سطح مكتب أم جوال ، قادرًا على تحريك عنصر بسلاسة حول الشاشة. هذا سيجعل من السهل إضافة تأثيرات ثلاثية الأبعاد رائعة مثل Trello عند تحريك البطاقة.

سيسمح هذا أيضًا بتعيين مؤشر الماوس أثناء السحب وعرض عنصر نائب أكثر مرونة ... أشياء لا يمكنك فعلها باستخدام واجهة برمجة تطبيقات DND الأصلية

لقد أدركت للتو أنه يمكننا _ أيضًا_ جعل واجهة برمجة تطبيقات "طبقة السحب" متاحة لمتصفح D&D API. فقط قم بتعيين dragImage على بكسل شفاف كما في هذا المثال وارسم ما تريد.

تضمين التغريدة

لدي دليل على المفهوم هنا: http://gaearon.github.io/react-dnd/#/drag -around-trial

سيومض أثناء تحريكه :-) (لن يعمل في Firefox حتى الآن)

شفرة المصدر ذات الصلة:

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/index.js#L14

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/DragLayer.js

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/Box.js#L69

كما ترى ، يعود الأمر إلى المستهلك لرسم طبقة سحب ومكونات عليها ، لذا فهي مرنة حقًا.

سأحاول إنهاء هذا الأسبوع كنقطة انطلاق للمس الدعم ، وبعد ذلك لن يكون من الصعب فعل الشيء نفسه في وضع اللمس.

نستخدم طبقة سحب تشبه هذه إلى حد كبير ، لكننا نستخدم onMouseMove وما إلى ذلك حتى تتمكن من تغيير مؤشر الماوس ...
مصدر قلق بسيط ولكنه مهم للغاية بالنسبة لنا. كما يسمح باستخدام نفس الرمز في الغالب لأحداث اللمس والمؤشر.
لا تزال عناصر DragLayer خطوة في الاتجاه الصحيح بالنسبة لي ، بمجرد لمس الدعم ، سأكون على استعداد لمحاولة توسيع ذلك لدعم أحداث المؤشر والماوس إذا كنت مهتمًا بالحصول على هذه الميزات كميزات؟

أرغب في الحصول على واجهة برمجة تطبيقات HTML5 D&D كخلفية افتراضية ثم أقوم بتمكين الخلفيات الخلفية القائمة على اللمس / القائمة على تحريك الماوس.

سيكون HTML5 D&D هو الأبسط (لا حاجة لطبقة السحب ، كل شيء يديره المتصفح). يتطلب الاشتراك في تحريك الماوس / تحريك اللمس تنفيذ طبقة سحب لرسم ما تريد.

من المنطقي؟

بالتأكيد ، هذا ما كنت آمل أن يحدث.
HTML5 D&D سريع (إلى جانب المراوغات) سهل الاستخدام جدًا ، لذا فهو الخيار الواضح افتراضيًا.

لذلك تلقيت للتو طلبًا لتمكين ميزة اللمس بالسحب والإفلات. هل فعل أي شخص هذا ويريد مشاركة النصائح؟

تضمين التغريدة

بدأ nelix العمل على الواجهة الخلفية mousemove ، وسنقوم بعمل خلفية خلفية touchmove بعد ذلك.

يمكنك إلقاء نظرة على العمل الجاري هنا: https://github.com/nelix/react-dnd/commit/8de7f7fe24c7ae397a971c517dada9323e6c27f0 (لا يزال بعيدًا عن الإنجاز ولا يعمل في هذه المرحلة) ما زلنا بحاجة إلى معرفة الأجزاء التي تبقى في DragDropMixin والتي يجب نقلها إلى backends/HTML5 (وغيرها من الأجزاء الخلفية).

إذا كنت ترغب في العمل على ذلك ، فيمكنك البدء بهذا الالتزام والاستمرار في تنفيذ mousemove backend. عندما يعمل ، لا ينبغي أن يكون من الصعب تنفيذ خلفية Touchmove مماثلة.

من فضلك ، إذا كنت ترغب في العمل على هذا ، فأبقينا على اطلاع دائم هنا أو في Gitter room ، حتى لا ينتهي بنا الأمر بتطبيقين.

إليك دليل على مفهوم دعم اللمس: https://github.com/gaearon/react-dnd/pull/143

يمكنك اللعب بها: http://rawgit.com/gaearon/react-dnd/touch-poc/examples/index.html

يستخدم HTML5 backend على سطح المكتب والخلفية اللمسية على الهاتف المحمول.
سيظهر مثال العرض المخصص فقط معاينة السحب على الهاتف المحمول.

يبدو هذا واعدًا جدًا! أي أفكار حول متى قد يحدث هذا؟ :)

أنا مشغول حاليًا بمشروع آخر وسيظل كذلك حتى يوليو.
قد أتمكن من العمل على هذا في مكان ما في يوليو أو أغسطس ، لكنني سأكون سعيدًا إذا هزمني أحدهم :-)

منذ 1.1 تم ذكره في هذا الموضوع و v1.1.4 خارج. أنا فقط أتساءل عما إذا كان إثبات المفهوم أعلاه مدرج بالفعل في 1.1.4؟

لا.

ما كان يجب أن أستخدم رقم إصدار دقيق لأنك لا تعرف أبدًا متى ستصطدم :-)

ليس لدي الوقت حاليًا للعمل على هذا ولكن إثبات المفهوم موجود في العلاقات العامة. من المحتمل أن أقوم بتحديث العلاقات العامة لتعكس واجهة برمجة التطبيقات الحالية وانتظر حتى يقوم شخص ما بتنفيذها بالفعل.

دعنا نواصل المناقشة في https://github.com/gaearon/react-dnd/pull/240.

لمعلوماتك: https://github.com/yahoo/react-dnd-touch-backend.

بالنسبة لأولئك الذين يأتون من بعدي ، يبدو أن هذا هو الطريق إلى الأمام https://github.com/LouisBrunner/react-dnd-multi-backend

لقد كتبت هذا المقتطف:

function multiBackends(...backendFactories) {
  return function(manager) {
    const backends = backendFactories.map(b => b(manager));
    return {
      setup: (...args) =>
          backends.forEach(b => b.setup.apply(b, args)),
      teardown: (...args) =>
          backends.forEach(b => b.teardown.apply(b, args)),
      connectDropTarget: (...args) =>
          backends.forEach(b => b.connectDropTarget.apply(b, args)),
      connectDragPreview: (...args) =>
          backends.forEach(b => b.connectDragPreview.apply(b, args)),
      connectDragSource: (...args) =>
          backends.forEach(b => b.connectDragSource.apply(b, args)),
    };
  };
}

الذي أستخدمه مثل هذا:

DragDropContext(multiBackends(
      ReactDnDHTML5Backend,
      ReactDnDTouchBackend,
  ))

يستمع react-dnd-html5-backend و react-dnd-touch-backend إلى مجموعة منفصلة من الأحداث. (السحب ، السحب ، السحب ، السحب ، السحب ، السحب ، والإفلات مقابل البدء باللمس ، اللمس والتحريك باللمس).

بعض الاختبارات الأساسية وتعمل بشكل جيد ، يدعم السحب والإفلات الآن أحداث اللمس والماوس في نفس الوقت.

هل هناك أي أسباب لعدم نجاحه؟