16-Dars JavaScript - Drag ва Drop

12 Кисм. Drag ва Drop

§ Drag ва Drop нима.
Java S 1.2 ни ходисаларнинг янги модели ва каватлар механизми ёрдамида Web сахифамизда drag ва drop схемасини ишлатиш имкониятига эга буламиз.
Drag ва drop нима? Масалан, бир канча ОС лар ( windows 95/NT ёки Mac OS) бизга файлларни ахлат кутисига олиб борган холда тозалашга рухсат беради. Бошкача килиб айтганда сиз файл тасвирига сичконча тугмасини туртасиз ва уни ахлат кутисига олиб борасиз – drag ва сунг уни у ерга ташлайсиз – drop. Биз бу ерда амалга оширмокчи булган drag ва drop механизми Web сахифада чегараланади. Шунинг учун сиз HTML cахифадаги объектларни компьютерингизнинг каттик диски ёки бошка хусусий харакатларга келтириш учун бу ерда келтирилган хаддан фойдалана олмайсиз. JavaScript +тили тугридан тугри Drag ва Drop механизмини куллаб кувватламайди. Бу бизда image объекти учун drageable ёки бирор бир хусусиятни белгилаш имкони йук деган маънони беради. Шунинг учун биз бунинг учун зарур кодни узимиз ёзишимиз керак. Лекин бу унчалик кийин эмас. Демак бизга нима керак? Бизга икки нарса керак. Биринчидан биз сичконча билан боглик аник ходисани аниклашимиз керак, яъни кандай тушунишимиз керак. Сунгра биз экран буйлаб объектларни кандай килиб утказишни уйлашимиз керак. Албатта биз объектларни яратиш ва уларни экран буйлаб жойлаштиришни кават сингари янги имкониятдан фойдаланган холда бажарамиз. Хар бир объект узининг кавати билан намоён булади.

JavaScript 1.2 да сичконча билан ишлашдаги ходисалар.
Биз сичконча билан ишлашда юз берадиган ходисалардан кайси бирини ишлатишимиз керак? Бизда MouseDrag каби ходиса йук лекин бу уни Mouse Dam ,Mouse Move ва Mouse up ходисаларни кайта ишлаб эришишимиз мумкин. Javas ни 1.2 версиясида ходисаларниниг янги модулидан фойдаланилади . Биз буларсиз ушбу масалани ечиб билмайбиз . Келинг бу янги моделнинг бир канча мухим кисмига яна бир куриб чикайлик. Фойдаланувчи браузер дарчасининг бирор бир жойида сичконча тугмасини босади. Бизнинг скрипт бу ходиса кайси объект (яъни кават) билан богликлигини ва бу ходисани бажариш керак.Бизга ушбу ходиса координата нукталарини билишимиз керак.Java S 1.2 да ушбу нукталарни координаталарини руй беришининг саклайдиган янги Event объекти ташкил килинган. Ходисани камраб олиниши бошка бир мухим моментни узх ичига олади. Масалан агар фойдаланувчи сичконча тугмачасини туртса, у холда унга мос ходиса тугридан-тугри Button объектига юборилади. Лекин бизнинг мисолимизда бу ходиса Window объектида ишлатилиши керак. Шунинг учун биз дарча объектига сичконча билан боглик ходиса хакидаги сигнални камраб олишга рухсат берамиз. Бу навбатдаги мисолда номоён булади. (Click ходисасида ) сиз браузер дарчасининг ихтиёрий жойига сичконча билан туртишингиз мумкин. Бунда дарчада ушбу ходиса руй берган жойнинг координатаси хакидаги хабар дарчаси номоён булади.
Ушбу мисолнинг коди :

< html >
< script lauguage = “ Javascript '' >
< ! - - hide
Window.Capture Events ( Event. Check ) ;
Wihdow . Onclick = displayCoords :
function display Coords (l)
alert (“x : “ + l.pagex + “ y : “ + l.page y ) ;
}
//--
</script>
Ушбу дарчанинг кайсидир жойига туртинг!
</html>
Дастлаб биз window объекти click ходисаси хакидаги сигнални камраб олишини хабар киламиз. Бунинг учун биз Capture.Event ( ) усулидан фойдаланамиз.
Window.onClick = displayCords; сатри шуни англатадики, click ходисаси содир булганида нима содир булади. Аникрок килиб айтганда браузернинг click ходисасига реакцияси сифатида displayCoords ( ) функцияси чакирилади (dispayCoords дан сунг кавс куйиш керак эмаслигини эътиборга олинг). Уз навбатида dispayCoords функцияси куйидаги куринишда аникланади:
Function dispayCoords (l) {
Alert (“x:”+l.page.x+ “y:”+l.page.y:);
Куриб турганингиздай бу функция аргументга эга (уни l деб атадик). Хакикитдан эса бу Event объекти булиб бу dispayCoords ( ) функциясига ишлатилишига берилади. Event объекти pege x ва page y каби хусусиятларга эга, улардан ходиса содир булган жой нуктасини координаталарини олиш мумкин. Хабар дарчаси эса факатгина шу кийматни курсатади.