এইচটিএমএল টানুন এবং মোবাইল ডিভাইসগুলি ড্রপ করুন

Question 1

আপনি যখন জাভাস্ক্রিপ্ট ব্যবহার করে কোনও ওয়েব পৃষ্ঠায় টানা এবং ড্রপ যুক্ত করেন, যেমন jQuery UI ড্রাগেজেবল এবং ড্রপযোগ্য, কোনও মোবাইল ডিভাইসে ব্রাউজারের মাধ্যমে দেখার সময় আপনি কীভাবে এটি কাজ করতে পারবেন - যেখানে টেনে আনার জন্য টাচ-স্ক্রিন ক্রিয়াকলাপগুলি বাধা দেয় পেজ চারপাশে স্ক্রোলিং জন্য ফোন?

সমস্ত সমাধান স্বাগত জানায় ... আমার প্রাথমিক চিন্তাগুলি হ'ল:

মোবাইল ডিভাইসের জন্য একটি বোতাম রয়েছে যা আইটেমটি টেনে আনার জন্য "উত্তোলন" করে এবং তারপরে তারা আইটেমটি যে ড্রোনটিতে রাখতে চান তা ক্লিক করতে পারেন।
মোবাইল অ্যাপ্লিকেশনগুলির জন্য এটি করে এমন একটি অ্যাপ্লিকেশন লিখুন তারপরে চেষ্টা করুন এবং ওয়েব পৃষ্ঠাটি সেগুলিতে কাজ করার জন্য পান!
আপনার পরামর্শ এবং মন্তব্য দয়া করে।

Question 2

jQuery UI টাচ পাঞ্চ কেবল এটি সমাধান করে।

এটি jQuery UI এর জন্য একটি টাচ ইভেন্ট সমর্থন। মূলত, এটি কেবল jQuery UI-এ ফিরে স্পর্শ ইভেন্টটিকে তারযুক্ত করে। আইপ্যাড, আইফোন, অ্যান্ড্রয়েড এবং অন্যান্য টাচ-সক্ষম মোবাইল ডিভাইসে পরীক্ষিত। আমি jQuery ইউআই বাছাইযোগ্য ব্যবহার করেছি এবং এটি একটি কবজ মত কাজ করে।

http://touchpunch.furf.com/

Question 3

টাচ-এ-ড্রপ-এ স্পর্শ ইভেন্টগুলি অনুবাদ করার জন্য একটি নতুন পলিফিল রয়েছে, যেমন এইচটিএমএল 5 ড্রাগ এবং ড্রপটি মোবাইলে ব্যবহারযোগ্য।

Polyfill উপর বের্নার্ডো Castilho প্রবর্তন করেন পোস্টটি ।

এই পোস্ট থেকে একটি ডেমো এখানে ।

পোস্টটি ফলিফিল ডিজাইনের বিভিন্ন বিবেচনাও উপস্থাপন করে।

Question 4

সেনচা টাচের বিটা সংস্করণটিতে ড্রাগ এবং ড্রপ সমর্থন রয়েছে।

আপনি তাদের ডিএনডি উদাহরণটি উল্লেখ করতে পারেন । এটি কেবল ওয়েবকিট ব্রাউজারগুলিতেই কাজ করে।

কোনও ওয়েব পৃষ্ঠায় সেই যুক্তিটি পুনঃনির্ধারণ করা সম্ভবত কঠিন হতে চলেছে। আমি এটি বুঝতে পারি যে তারা সমস্ত ব্রাউজার প্যানিং অক্ষম করে এবং প্যানিং ইভেন্টগুলিকে পুরোপুরি জাভাস্ক্রিপ্টে প্রয়োগ করে, ড্রাগ এবং ড্রপের সঠিক ব্যাখ্যার অনুমতি দেয়।

আপডেট: মূল উদাহরণের লিঙ্কটি মারা গেছে তবে আমি এই বিকল্পটি খুঁজে পেয়েছি:
https://github.com/kostysh/Drag-Drop-example-for-Sencha-Touch

Question 5

আমার উইন্ডোজ ফোন সহ ডেস্কটপ, মোবাইল, ট্যাবলেটে কাজ করে এমন একটি টানা এবং ড্রপ + ঘূর্ণন তৈরি করা দরকার। শেষটি এটিকে আরও জটিল করে তুলেছিল (এমএসপয়েন্টার বনাম স্পর্শ ইভেন্ট)।

সমাধানটি গ্রেট গ্রিনসক গ্রন্থাগার থেকে এসেছে

একই অবজেক্টটিকে টেনে আনে এবং ঘোরানোর উপযোগী করতে হুপসের মধ্য দিয়ে কিছুটা ঝাঁপিয়ে পড়েছিল তবে এটি পুরোপুরি কার্যকর হয়

Question 6

আপনি বার বার বার্নার্ডো ক্যাসটিলহোর অনুরূপ টিম রাফেলের ড্রাগ-এন-ড্রপ পলিফিলের চেষ্টা করতে পারেন (@ রেমদেভেকের উত্তর দেখুন)।

সহজভাবে করুন npm install mobile-drag-drop --save(অন্যান্য ইনস্টলেশন পদ্ধতি উপলভ্য যেমন বোর সহ)

তারপরে, স্পর্শ সনাক্তকরণের উপর নির্ভর করে যে কোনও উপাদান ইন্টারফেসটি মোবাইলে কাজ করা উচিত (যেমন একই সময়ে স্ক্রোলিং + টেনে আনার পরিবর্তে কেবলমাত্র একটি উপাদান টেনে নিয়ে যাওয়া)।

Question 7

জ্যাকোরি টাচ পাঞ্চ দুর্দান্ত তবে এটি যা করে তা হ'ল টানতে সক্ষম ডিভের সমস্ত নিয়ন্ত্রণ অক্ষম করে যাতে এটি রোধ করতে আপনার লাইনগুলিকে পরিবর্তন করতে হবে ... (লেখার সময় - লাইন 75)

পরিবর্তন

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])){

পড়তে

if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0]) || event.originalEvent.target.localName === 'textarea'
        || event.originalEvent.target.localName === 'input' || event.originalEvent.target.localName === 'button' || event.originalEvent.target.localName === 'li'
        || event.originalEvent.target.localName === 'a'
        || event.originalEvent.target.localName === 'select' || event.originalEvent.target.localName === 'img') {

আপনি 'আনলক' করতে চান এমন প্রতিটি উপাদানের জন্য যতগুলি চান আপনি যোগ করুন

আশা করি যে কাউকে সাহায্য করবে

Question 8

এখানে আমার সমাধান:

$(el).on('touchstart', function(e) {
    var link = $(e.target.parentNode).closest('a')  
    if(link.length > 0) {
        window.location.href = link.attr('href');
    }
});

Question 9

বাছাইযোগ্য জাতীয় গ্রন্থাগার স্পর্শ পর্দার সঙ্গে সামঞ্জস্যপূর্ণ এবং jQuery প্রয়োজন হয় না।

এটি যেভাবে স্পর্শ পর্দা পরিচালনা করে তাতে কোনও আইটেম টেনে আনতে শুরু করতে আপনাকে প্রায় 1 সেকেন্ডের জন্য স্ক্রিনটি স্পর্শ করতে হবে।

এছাড়াও, তারা একটি ভিডিও পরীক্ষা উপস্থাপন করে যা দেখায় যে এই লাইব্রেরিটি JQuery UI বাছাইযোগ্য এর চেয়ে দ্রুত চলছে।