ورود

View Full Version : سوال: چطور می تونم محتویات یک div رو که در یک div دیگر قرار داره drag& drop کنم



Spring_64
سه شنبه 24 خرداد 1390, 16:22 عصر
سلام
چطور می تونم محتویات یک div رو که در یک div دیگر قرار داره drag& drop کنم(ممکنه حتی چند div در یک div موجود باشه) در ضمن نمیخوام از پلاگین هم استفاده کنم این خیلی مهمه.

mehdi.mousavi
سه شنبه 24 خرداد 1390, 21:25 عصر
سلام چطور می تونم محتویات یک div رو که در یک div دیگر قرار داره drag& drop کنم(ممکنه حتی چند div در یک div موجود باشه) در ضمن نمیخوام از پلاگین هم استفاده کنم این خیلی مهمه.

سلام.
روش کلی این هستش که وقتی mousedown روی element تعیین شده (که قراره Drag بشه) رخ داد، position اون element رو absolute کنید و با جابجایی mouse مختصات اون element رو set کنید. به این ترتیب عمل Drag انجام میشه. برای Drop، باید ببینید که Place Holder ای که قراره امکان Drop رو برای اون فراهم کنید، در کجای DOM Doc قرار داره (که باید اینو هم هنگام init کردن، تعیین کنید). وقتی اون element رو تشخیص دادید، باید متوجه بشید که چه هنگام اون Element ای که Drag شده، به Place Holder رسیده و میشه کلید Mouse رو رها کرد. وقتی Mouse رها شد (یعنی mouseup)، اونوقت میتونید element اصلی رو به element مقصد prepend (یا append) کنید، بدین ترتیب Element از جایگاه اصلیش در DOM Doc جدا میشه و به جایگاه جدید منتقل داده میشه.

اما اینهایی که گفتم فقط شمای کلی کار بودش. پیاده سازی صحیح این کار، جزییات زیادی داره برای همین بهتون توصیه میکنم از یکی از jQuery Plugin های موجود استفاده کنید. اینجا 30 تا jQuery Plugin (http://www.1stwebdesigner.com/freebies/drag-drop-jquery-plugins/) برای اینکار معرفی شده، میتونید حتی Source اونها رو بررسی کنید و یکی خودتون بنویسید (اگر چه این کارو توصیه نمیکنم، بنظرم Draggable در jQuery UI پیاده سازی خوبی هستش).

موفق باشید.