ورود به حساب ثبت نام جدید فراموشی کلمه عبور
برای ورود به حساب کاربری خود، نام کاربری و کلمه عبورتان را در زیر وارد کرده و روی “ ورود به حساب” کلیک کنید.





اگر فرم ثبت نام برای شما نمایش داده نمیشود، اینجا را کلیک کنید.









اگر فرم بازیابی کلمه عبور برای شما نمایش داده نمیشود، اینجا را کلیک کنید.





نمایش نتایج: از 1 به 2 از 2
  1. #1
    adminmsp
    مدیر کل و موسس سایت
    تاریخ عضویت
    1970 Jan
    محل سکونت
    M.S.P Soft
    نوشته ها
    1,588
    759
    419

    drag & drop در HTML 5

    drag & drop عناصر در صفحات وب :
    یکی از قابلیت های هیجان انگیز و جالب HTML 5 ، این است که شما می توانید کاری کنید عنصر مورد نظرتان در صفحه وب ، قابل جابه جا شدن باشد . به عبارت دیگر کاربر بتواند آن را از نقطه ای به نقطه دیگر drag & drop کند .
    برای مثال شما می توانید کدی طراحی کنید تا کاربر بتواند یک عکس را از مکان اولیه آن به یک مکان دوم که تعیین نموده اید ، به وسیله موس بلند کرده و جابه جا کند .
    این کار نیازمند کد نویسی و تعریف چند تابع است . برای اینکه درک بهتری از نحوه کار داشته باشید ، ابتدا نمونه کد لازم برای انجام این عملیات را به شما نشان می دهیم . سپس مرحله به مرحله اقدام به تشریح کد می کنیم .
    کد لازم برای dargable ( قابل جابه جا بودن ) یک عکس و سپس انتقال آن در جدول زیر به شما نمایش داده شده است . به کد دقت کنید . در ادامه هر مرحله از کد را توضیح داده ایم :

                    <head>
    <script type="text/javascript">
    function allowDrop(ev)
    {
    ev.preventDefault();
    }
    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }
    function drop(ev)
    {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data ));
    ev.preventDefault();
    }
    </script>
    </head>
    <body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    </div>
    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
    </body>


    ممکن است کد بالا در نگاه اول بسیار پیچیده باشه ، ولی در ادامه آن را جز به جز شرح داده ایم ، تا متوجه نحوه کار شوید .
    مرحله اول - عنصر مورد نظر را قابل جا به جا کردن کنید :
    در مرحله اول باید کاری کنید تا عنصر مورد نظرتان برای drag & drop کردن ، قابل جا به جا شدن باشد .
    برای این منظور بایر مقدار خاصیت drggable آن را بر روی مقدار true تنظیم نمایید .
         < img draggable = " true " />


    مرحله دوم - تعیین عنصری که می خواهید جا به جا شود :
    در مرحله دوم باید عنصری را که می خواهید جا به جا شود و همچنین اتفاقی که پس از darg کردن آن قرار است بیفتد را تعیین می کنید .
    کد مربوط به این قسمت ، قطعه کد زیر است :
    function drag ( ev )
    {
    ev.dataTransfer.setData ( " Text " , ev.target.id ) ;
    }

    در کد بالا ، خاصیت ondragstart عنصر عکس تگ ( < img > ) ، رویداد ( drag ( event را فراخوانی می کند . این رویداد تعیین می کند چه عنصری می خواهد drag شود . این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید .
    متد ( ) dataTransfer.setData اطلاعات عنصری که قرار است darg شود ، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد . این id از نوع " text " بوده و مقدار آن در این مثال drag1 است .
    مرحله سوم - عنصر darg شده در کجا drop شود ؟ :
    پس از اینکه عنصر مورد نظر را انتخاب کرده و آن را drag کردیم ، باید مکانی که فرود ( drop ) می آید را تعیین کنیم . این کار توسط کد زیر انجام می شود :
    function drop(ev)
    {
    var data = ev.dataTransfer.getData( " Text " ) ;
    ev.target.appendChild ( document.getElementById ( data ) );
    ev.preventDefault( );
    }

    هنگامی که عکس را در مکان تعیین شده رها می کنید ، رویداد ondrop تگ < div > رخ داده و تابع drop را فراخوانی می کند ..تابع drop توسط متد ( ) ev.dataTransfer.getData ، شناسه یا همان id عنصر drag شده را دریافت کرده و با متد ev.target.appendChild آن را به تگ div مرتبط می سازد .
    مشاهده خروجی کد مثال :
    خروجی اکتیو کد بالا در جدول زیر نمایش داده شده است عکس لوگوی HTML 5 را drag & drop کرده و در تگ div تعیین شده ، رها کنید :
    با M.S.P Soft به دنياي برنامه نويسي وارد شويد[برای نمایش لینک باید عضو شوید. ]
  2. #2
    mirhendi
    كاربر عادي
    تاریخ عضویت
    1970 Jan
    نوشته ها
    27
    5
    13
    سلام
    ممنون میشه نمونه بزارید؟؟
    [برای نمایش لینک باید عضو شوید. ]
    امروز همان فردای دیروز است ...
    قدر فرداهایمان را بدانیم..
    اسنتخدام برنامه نویس c# با حقوق و مزایای عالی در اصفهان
نمایش نتایج: از 1 به 2 از 2

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. پرسش و پاسخ درباره زبان html
    توسط guitarshekasteh70 در انجمن HTML
    پاسخ: 5
    آخرين نوشته: 2015-07-14, 07:31 PM
  2. آموزش تمام کد های html از ابتدا تا پیشرفته
    توسط guitarshekasteh70 در انجمن HTML
    پاسخ: 0
    آخرين نوشته: 2012-10-02, 11:07 AM
  3. ذخیره سازی اطلاعات کاربران در html 5
    توسط MspSoft در انجمن طراحی وب (Web Design)
    پاسخ: 0
    آخرين نوشته: 2012-09-07, 10:58 PM
  4. پخش فایل های تصویری در html 5
    توسط MspSoft در انجمن طراحی وب (Web Design)
    پاسخ: 2
    آخرين نوشته: 2012-09-07, 10:51 PM
  5. آموزش html - درس 1
    توسط javanr0d در انجمن طراحی وب (Web Design)
    پاسخ: 19
    آخرين نوشته: 2011-12-25, 09:21 PM

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  

Content Relevant URLs by vBSEO 3.6.0 RC 2