jquery বাছাইযোগ্য স্থানধারক উচ্চতার সমস্যা

Question

কোনও কারণে আমার বাছাইযোগ্য আইটেমগুলির জন্য স্থানধারক প্রায় 10px। আমার সমস্ত বাছাইযোগ্য আইটেমের উচ্চতা রয়েছে। আইটেমটি সরানো হচ্ছে আমি কীভাবে প্রতিটি স্থানধারকের উচ্চতা পরিবর্তন করতে পারি?

Comments

আপনি কি এটি jsFood পোস্ট করতে পারেন?

— সতীশ

আপনি যখন কেবল নিজের আইটেমটিকে অন্য জায়গায় টেনে নিয়ে গিয়ে ফেলেছেন তখন কি এটি ঘটবে? বা আইটেমগুলির পৃষ্ঠাটি লোড করার পরে ইতিমধ্যে এই উচ্চতা রয়েছে? যাইহোক এখানে দেখুন: bugs.jqueryui.com/ticket/4482 এবং উল্লিখিত হিসাবে কাজ করার চেষ্টা করুন

— মোহাম্মদ

Answer 1

আমি সাধারণত একটি কলব্যাক বাঁধার মাধ্যমে এটি সমাধান করি যা startইভেন্টে বাছাই করা আইটেমের উচ্চতার জন্য স্থানধারকের উচ্চতা নির্ধারণ করে । এটি একটি সহজ সমাধান যা আপনি আপনার স্থানধারককে কীভাবে প্রদর্শিত হতে চান তার উপর সূক্ষ্ম-নিয়ন্ত্রণযুক্ত নিয়ন্ত্রণ দেয়।

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }
});

দেখুন আপডেট পরীক্ষা ক্ষেত্রে

Comments

আমি ব্যক্তিগতভাবে ui.item.height () ui.helper.outerHeight () এর সাথে প্রতিস্থাপন করতে হয়েছিল কিছু কারণের কারণে মার্জিন এবং প্যাডিংয়ের উপাদানটির আসল উচ্চতা স্কুইং করে

— ওশিক্রিউ

দুঃখিত তবে আমি মনে করি এটি ভালভাবে কাজ করে না, এই লিঙ্কে jsfiddle.net/t8gcZ/1 , প্লেসহোল্ডার উচ্চতা আইটেমের উচ্চতার (237px) সমান তবে শুরুতে আমরা নীচের আইটেমটি একটি জঞ্জাল উপরে সরিয়ে দেখতে পেলাম

— মাকিও

@ ম্যাকিও এটি প্যাডিংয়ের নীচে থাকার কারণে। প্লেসোল্ডারের সাথে প্যাডিং-ডাউন যুক্ত করা এটি সমাধান করে। jsfiddle.net/t8gcZ/136

— mekwall

Answer 2

আপনি forcePlaceholderSize:trueসম্পত্তি সেট করার চেষ্টা করেছেন ? JQuery UI বাছাইযোগ্য ডকুমেন্টেশন পৃষ্ঠাতে একটি পড়ুন ।

Comments

আমি এটি চেষ্টা করেছি, তবে সত্য বা মিথ্যা যুক্তটি আমার মূল সাইটে কোনও পার্থক্য করে না যা এটি 10px উচ্চে রাখে। এই jsfiddle এ, এটি সঠিকভাবে আকার পরিবর্তন করে, তবে forceplaceholdersize সত্য বা মিথ্যাতে সেট করে কোনও পার্থক্য নেই। jsfiddle.net/t8gcZ

— oshirowanen

@oshirowanen: আপনি কোন ব্রাউজারটি এটি পরীক্ষা করছেন?

— দার্থজেডিজি

@oshirowanen: আপনি কোডটির লিংকটি পোস্ট করতে পারেন যেখানে এটি আসলে ভেঙে গেছে?

— দার্থজেডিজি

এটা আমার জন্য কাজ করে। সকল আমি কি ছিল সিএসএস পরিবর্তন ছিল .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }থেকে .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; }(তাই উচ্চতা সরাতে) সুতরাং @DarthJDG আপনি ঠিক!

— জেপি হেলিমোনস

@ জেপি হেলিমোনস কেবল উচ্চতা গতিশীল না হলে কাজ করে

— এরদল জি।

Answer 3

আপনার উপাদান display: blockকি? ইনলাইন উপাদানগুলি স্থানধারকটিকে উচ্চতা সঠিকভাবে না রাখার ব্যবস্থা করতে পারে। যেমন এই জেএসফিডাল আপনার বর্ণিত ব্যক্তির সাথে একই রকম সমস্যা বলে মনে হচ্ছে। ক্লাসে যুক্ত display: blockকরা এটি .portletঠিক করে দেয়।

Comments

একই ভাসমান উপাদান জন্য যায়। তালিকার উপাদানগুলি যদি ভাসমান হয় তবে স্থানধারকটিও ভাসা উচিত।

— অ্যাড্রিয়ান মেরিনিকা

Answer 4

বাহ্যিক ধারক থেকেও কোনও আইটেম টেনে আনলে স্থিতিশীল ফলাফলের জন্য "ui.item.height ()" ব্যবহার করার পরিবর্তে আপনি "ui.helper [0] .scrolHeight" ব্যবহার করতে পারেন।

$( ".column" ).sortable({
    connectWith: ".column",
    start: function(e, ui){
        ui.placeholder.height(ui.helper[0].scrollHeight);
    }
});

Answer 5

আপনি আপনার বাছাইয়ের জন্য বিকল্প হিসাবে আপনার স্থানধারকের জন্য একটি স্টাইল সেট করতে পারেন।

$( "#sortable" ).sortable({
        placeholder: "ui-state-highlight"
});

এবং শুধু যে শৈলী একটি উচ্চতা দিন। আশা করি কাজ করে।

Comments

কিন্তু উচ্চতা ঠিক করবে না? আমার বিষয়বস্তুর মতো হতে পারে need

— oshirowanen

Answer 6

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

এটি সঙ্গে কাজ করে display: inline-block;

.ui-sortable-placeholder { 
     background:red !important; 
     height: 2px !important; // this is the key, set your own height, start with small
     visibility: visible !important;
     margin: 0 0 -10px 0; // additionaly, you can position your placeholder, 
     }                    // in my case it was bottom -10px