Drag and Drop තාක්ෂණයේ සාමාන්‍ය ගැටළු සහ න්‍යාය. Android හි Drag and Drop තාක්ෂණය අනෙකුත් ශබ්ද කෝෂවල "Drag-and-drop" යනු කුමක්දැයි බලන්න
182
මෙම උදාහරණයේදී, අපි div මූලද්රව්යයක් තෝරා එය මත ඇදගෙන යා හැකි() ක්රමය ඇමතීමෙන් එය චංචල කරන්නෙමු. පහත රූපයේ දැක්වෙන පරිදි, විවෘත කරන ලද ලේඛනයේ මූලද්රව්යය එහි සුපුරුදු ස්ථානය ගනී, නමුත් ඉන් පසුව එය මූසික දර්ශකය භාවිතයෙන් බ්‍රව්සර් කවුළුවේ ඕනෑම ස්ථානයකට ගෙන යා හැකිය:
මූලද්රව්ය ඇදගෙන යාමේ හැකියාව තනිවම ප්රයෝජනවත් වේ, නමුත් එය ඊළඟට විස්තර කෙරෙන Droppable අන්තර්ක්‍රියාව සමඟ ඒකාබද්ධව භාවිතා කරන විට වඩාත් ප්රයෝජනවත් වේ.
ඇදගෙන යා හැකි අන්තර්ක්‍රියා නිශ්චිත HTML සලකුණු සහ CSS විලාසයන් භාවිතයෙන් පමණක් ලබා ගත හැක. මෙයින් අදහස් කරන්නේ මෙම ක්‍රියාකාරීත්වය ඕනෑම බ්‍රවුසරයක පාහේ ක්රියා කරන බවයි, නමුත් එය ලබා දී ඇති මූලද්‍රව්‍යවලට සමාන දේශීය ඇදගෙන යාමේ මෙවලම් සමඟ ක්රියා කිරීමට නොහැකි වනු ඇත. මෙහෙයුම් පද්ධති.
HTML5 පිරිවිතර මගින් අර්ථ දක්වා ඇති ඇදගෙන යාමේ මෙහෙයුම් සාමාන්‍යයෙන් දේශීය මෙහෙයුම් පද්ධති යාන්ත්‍රණ භාවිතයෙන් ක්රියාත්මක වේ. ඔබ jQuery UI Drag-and-drop යාන්ත්රණය භාවිතා කරන්නේ නම්, ගැටුම් වළක්වා ගැනීම සඳහා සමාන HTML5 විශේෂාංග අක්රිය කිරීම වඩා හොඳය. මෙය සිදු කිරීම සඳහා, ලේඛනයේ ශරීර මූලද්‍රව්‍යයේ ඇදගෙන යා හැකි ගුණාංගය අසත්‍ය ලෙස සකසන්න.
ඇදගෙන යා හැකි අන්තර්ක්‍රියා සැකසීමඇදගෙන යා හැකි අන්තර්ක්‍රියා සඳහා බොහෝ අභිරුචිකරණ විකල්ප තිබේ. පහත දැක්වෙන කොටස්වල සාකච්ඡා කෙරෙන වැදගත්ම ගුණාංග පහත වගුවේ දක්වා ඇත:
| අක්ෂය | ඇතැම් දිශාවලට ගමන් කිරීමේ හැකියාව සීමා කරයි. පෙරනිමි අගය අසත්‍යය, එනම් බාධාවක් නැත, නමුත් ඔබට "x" (X අක්ෂය ඔස්සේ පමණක් ගමන් කරන්න) හෝ "y" (Y අක්ෂය ඔස්සේ පමණක් ගමන් කරන්න) අගයක් නියම කළ හැක. |
| සීමා කිරීම | තිරයේ නිශ්චිත ප්‍රදේශයකට ගෙන යන මූලද්‍රව්‍යයේ පිහිටීම සීමා කරයි. අනුරූප උදාහරණය භාවිතා කරමින් සහය දක්වන අගයන් වර්ග පහත වගුවේ විස්තර කර ඇත. පෙරනිමි අගය අසත්‍ය වේ, එයින් අදහස් වන්නේ සීමාවන් නොමැති බවයි |
| ප්රමාදය | මූලද්රව්ය චලනය වීමට පෙර එය කොපමණ කාලයක් ඇදගෙන යා යුතුද යන්න සඳහන් කරයි. පෙරනිමි අගය 0 වේ, එනම් ප්‍රමාදයක් නැත |
| දුර | කිසියම් මූලද්රව්යයක් සත්‍ය වශයෙන්ම චලනය වීමට පෙර එහි ආරම්භක ස්ථානයෙන් පරිශීලකයා ඇදගෙන යා යුතු දුර නිර්වචනය කරයි. පෙරනිමි අගය පික්සල 1 කි |
| ජාලකය | චලනය කරන ලද මූලද්රව්ය ජාලක සෛල වෙත කඩා වැටීමට බල කරයි. පෙරනිමි අගය අසත්‍යයි, එයින් අදහස් වන්නේ බැඳීමක් නොමැති බවයි |
ඔබට මූලද්‍රව්‍යයේ චලනය යම් දිශාවකට සීමා කළ හැකි ක්රම කිහිපයක් තිබේ. පළමුවැන්න නම්, X හෝ Y අක්ෂයට චලනය වන දිශාව සීමා කිරීමට ඉඩ සලසන අක්ෂ විකල්පය භාවිතා කිරීමයි.මේ සඳහා උදාහරණයක් පහත දැක්වේ:
... div.dragElement (අකුරු ප්‍රමාණය: විශාල; මායිම: තුනී ඝන කළු; පෑඩිං: 16px; පළල: 8em; පෙළ පෙළගැස්ම: මධ්‍ය; පසුබිම-වර්ණය: සැහැල්ලු අළු; ආන්තිකය: 4px ) $(ක්‍රියාකාරීත්වය() ( $ (".dragElement").draggable((axis: "x")).filter("#dragV").draggable("option", "axis", "y"); )); සිරස් අතට අදින්න තිරස් අතට ඇදගෙන යන්න උදාහරණය ධාවනය කරන්න
මෙම උදාහරණයේදී, අපි div මූලද්රව්ය දෙකක් නිර්වචනය කර, jQuery භාවිතයෙන් ඒවා තෝරාගෙන, ඇදගෙන යා හැකි() ක්රමය අමතන්න. මෙම ක්‍රමයට තර්කයක් ලෙස, අපි මුලින් div මූලද්රව්ය දෙකේම චලනය X අක්ෂය දිගේ දිශාවට සීමා කරන වස්තුවක් පසු කරමු.එවිට jQuery filter() ක්රමය භාවිතා කිරීමෙන්, jQuery සෙවීමකින් තොරව dragV මූලද්රව්යය තෝරා ගැනීමට අපට හැකි වේ. සම්පූර්ණ ලේඛනය නැවතත් Y අක්ෂය දිගේ වෙනත් අවසර ලත් චලන දිශාවකට සකසන්න, මේ අනුව, අපට එක් div මූලද්රව්යයක් සිරස් දිශාවට පමණක් ඇදගෙන යා හැකි ලේඛනයක් ලැබේ, අනෙක් - තිරස් දිශාවට පමණි. ප්රතිඵලය රූපයේ දැක්වේ:
ඔබට අයිතමයක් ඇදගෙන යා හැකි තිරයේ ප්රදේශය සීමා කළ හැකිය. මෙය සිදු කිරීම සඳහා, බහාලුම් විකල්පය භාවිතා කරන්න. මෙම විකල්පයෙහි සඳහන් කළ හැකි අගය ආකෘති පහත වගුවේ විස්තර කර ඇත:
බහාලුම් විකල්පය භාවිතා කිරීමේ උදාහරණයක් පහත දැක්වේ:
... div.dragElement (අකුරු ප්‍රමාණය: විශාල; මායිම: තුනී ඝන කළු; පෑඩිං: 16px; පළල: 8em; පෙළ-පෙළගැස්වීම: මධ්‍ය; පසුබිම-වර්ණය: ලා අළු; මායිම: 4px ) #කන්ටේනර් ( මායිම: මධ්‍යම ද්විත්ව කළු; පළල: 700px; උස: 450px) $(function() ($(".dragElement").draggable(((containment: "parent" )).filter("#dragH").draggable("option", " අක්ෂය", "x");)); තිරස් අතට අදින්න මාපිය ධාවන උදාහරණය ඇතුළට අදින්න
මෙම උදාහරණයේ දී, මූලද්රව්ය දෙකම චලනය වීමේ හැකියාව සීමා කර ඇති අතර එමඟින් ඒවා ඇදගෙන යා හැක්කේ ස්ථාවර ප්‍රමාණයේ බෙදීමක් වන ඔවුන්ගේ මව් මූලද්රව්ය තුළට පමණි. පාවෙන ඩිව් එකකට අක්ෂ විකල්පය භාවිතයෙන් පාවෙන අමතර බාධාවක් ඇත, එයට එහි මාපිය තුළ පමණක් තිරස් අතට ගමන් කළ හැකිය. ප්රතිඵලය රූපයේ දැක්වේ:
ජාලක විකල්පය මඟින් චලනය කරන ලද මූලද්රව්ය ජාල සෛල වෙත බන්ධනය කිරීමට ඔබට ඉඩ සලසයි. මෙම විකල්පය අගයක් ලෙස ග්රිඩ් සෛලවල පළල සහ උස පික්සල වලින් සඳහන් කරන මූලද්රව්ය දෙකක අරාවක් ගනී. ජාල විකල්පය භාවිතා කිරීමේ උදාහරණයක් පහත දැක්වේ:
... #ඇදගෙන යා හැකි (අක්ෂර ප්‍රමාණය: x-විශාල; මායිම: තුනී ඝන කළු; පළල: 5em; පෙළ-සන්ධානගත කිරීම: මධ්‍ය; පෑඩිං: 10px) $(ක්‍රියාකාරීත්වය() ( $("#ඇදගෙන යා හැකි"). ඇදගෙන යා හැකි( (ග්රිඩ්:));)); මාව ඇදගෙන යන්න උදාහරණය ධාවනය කරන්න
මෙම උදාහරණය පික්සල් 100ක් පළල සහ පික්සල 50ක් උස සෛල සහිත ජාලකයක් නියම කරයි. ඔබ මූලද්රව්යයක් ඇදගෙන ගිය විට, එය එක් (නොපෙනෙන) සෛලයකින් තවත් සෛලයකට "පනී". ස්නැපින් ආචරණය අන්තර්ක්‍රියා ක්‍රියාකාරීත්වය භාවිතා කළ හැකි ආකාරය පිළිබඳ කදිම නිදසුනකි, නමුත් තිරපිටපත් භාවිතයෙන් එය ප්‍රකාශ කිරීම අපහසුය.
නිදහස් චලන අක්ෂය 1 ට සැකසීමෙන් ඔබට එක් දිශාවකට පමණක් ස්නැප් ප්‍රයෝගයක් සෑදිය හැක. උදාහරණයක් ලෙස, ඔබ ජාල විකල්පය සකසන්නේ නම්, එම මූලද්රව්යය තිරස් අතට ගෙන ගිය විට පික්සල් 100 ක් පළල ජාලක කොටු වෙත කඩා වැටෙනු ඇත, නමුත් නිදහසේ සිරස් අතට ගමන් කරයි.
චලනය ප්රමාදයචලනය වන මූලද්රව්යයක් ඇදගෙන යාම ප්රමාද කිරීමට ඔබට ඉඩ සලසන විකල්ප දෙකක් තිබේ. ප්රමාද විකල්පය මඟින් මූලද්රව්යය ඇත්ත වශයෙන්ම ගෙන යාමට පෙර පරිශීලකයා මූසික දර්ශකය ඇදගෙන යා යුතු කාලය මිලි තත්පර වලින් නියම කිරීමට ඔබට ඉඩ සලසයි. තවත් ආකාරයක ප්‍රමාදයක් දුරස්ථ විකල්පය මඟින් සපයනු ලැබේ, එය මූලද්රව්යයක් අනුගමනය කිරීමට පෙර පරිශීලකයා මූසික දර්ශකය ඇදගෙන යා යුතු පික්සල වලින් ඇති දුර සඳහන් කරයි.
සැකසුම් දෙකම භාවිතා කිරීමේ උදාහරණයක් පහත දැක්වේ:
... #කාලය, #දුර (අකුරු ප්‍රමාණය: විශාල; මායිම: තුනී ඝන කළු; පෑඩිං: 10px; පළල: 120px; පෙළ-පෙළගැස්වීම: මධ්‍ය; පසුබිම-වර්ණය: ලා අළු; ආන්තිකය: 4px; ) $(ක්‍රියාකාරීත්වය( ) ( $("#කාලය").ඇදගෙන යා හැකි(( ප්රමාදය: 1000 )) $("#දුර").ඇදගෙන යා හැකි((දුර: 150 )) )); කාල ප්රමාදය සමඟ අවහිර කරන්න අවම දුර ධාවන උදාහරණය සහිත අවහිර කරන්න
මෙම උදාහරණයේ චලනය කළ හැකි මූලද්රව්ය දෙකක් ඇත, ඉන් එකක් ප්රමාද විකල්පය භාවිතයෙන් ප්රමාද වන අතර අනෙක දුර විකල්පය භාවිතයෙන් ප්රමාද වේ.
ප්රමාදය විකල්පය මඟින් නිශ්චිතව දක්වා ඇති ප්‍රමාදයකදී, පරිශීලකයා එය ඇත්ත වශයෙන්ම මූලද්රව්යය ගෙනයාමට පෙර නිශ්චිත කාලයක් සඳහා ඇදගෙන යා යුතුය. මෙම උදාහරණයේ දී, මෙම කාල පරිච්ඡේදයේ කාලසීමාව 1000 ms වේ. මෙම අවස්ථාවේදී මූසිකය ගෙනයාම අවශ්ය නොවේ, නමුත් සම්පූර්ණ ප්රමාද කාලය පුරාම මූසික බොත්තම එබිය යුතුය, ඉන්පසු මූසිකය චලනය කිරීමෙන් මූලද්රව්යය ගෙන යා හැකිය. ප්රමාද කාලය ඉක්ම ගිය පසු, ගෙන යන මූලද්රව්යය කලින් සාකච්ඡා කළ ජාලකය, කලාපය සහ අක්ෂ විකල්ප මගින් පනවන ලද සීමාවන්ට යටත්ව, මූසික දර්ශකයේ ස්ථානයට කඩා වැටෙනු ඇත.
දුරස්ථ විකල්පය සමාන බලපෑමක් ඇති කරයි, නමුත් මෙම අවස්ථාවෙහිදී පරිශීලකයා මූලද්‍රව්‍යයේ ආරම්භක ස්ථානයේ සිට ඕනෑම දිශාවකට මූසික දර්ශකය අවම වශයෙන් නිශ්චිත පික්සල ගණනක් ඇදගෙන යා යුතුය. චලනය වන මූලද්රව්යය පසුව වත්මන් දර්ශක ස්ථානයට පනිනු ඇත.
ඔබ එකම මූලද්‍රව්‍යයට සැකසීම් දෙකම යොදන්නේ නම්, ප්රමාද නිර්ණායක දෙකම සපුරාලන තෙක් ගෙන ගිය මූලද්රව්යය චලනය නොවනු ඇත, i.e. මූලද්රව්යයක් ඇදගෙන යාමේ උත්සාහයක් නිශ්චිත කාලයක් පවතින තුරු සහ මූසික දර්ශකය නිශ්චිත පික්සල සංඛ්‍යාවක් ගෙන යන තෙක්.
ඇදගෙන යා හැකි අන්තර්ක්‍රියා ක්රම භාවිතා කිරීමඇදගෙන යා හැකි අන්තර්ක්‍රියා සඳහා අර්ථ දක්වා ඇති සියලුම ක්රම විජට් දෙස බලන විට ඔබ දැනටමත් දැක ඇති මූලික ක්රම සමූහයේ කොටසකි. ඇදගෙන යා හැකි අන්තර්ක්‍රියා සඳහා විශේෂිත ක්රම නොමැත, එබැවින් අපි ඒවා විස්තරාත්මකව ආවරණය නොකරමු. පවතින ක්රම ලැයිස්තුව පහත වගුවේ දක්වා ඇත:
ඇදගෙන යා හැකි අන්තර්ක්‍රියා සිදුවීම් භාවිතා කිරීමඅන්තර්ක්රියා ඇදගෙන යා හැකි අංගයක් ඇදගෙන යන විට ඔබට දැනුම් දෙන සරල සිදුවීම් සමූහයකට සහය දක්වයි. මෙම සිදුවීම් පහත වගුවේ විස්තර කර ඇත:
විජට් සිදුවීම් මෙන්ම, මෙම සිදුවීම් වලටද ප්රතිචාර දැක්විය හැක. ආරම්භක සහ නැවතුම් සිදුවීම් හැසිරවීමේ උදාහරණයක් පහත දැක්වේ:
... #ඇදගෙන යා හැකි (අකුරු ප්‍රමාණය: x-විශාල; මායිම: තුනී ඝන කළු; පළල: 190px; පෙළ-සන්ධානගත කිරීම: මධ්‍ය; පෑඩිං: 10px) $(කාර්යය() ( $("# ඇදගෙන යා හැකි"). ඇදගෙන යා හැකි( (ආරම්භය: ශ්‍රිතය() ( $("# ඇදගෙන යා හැකි").පෙළ("මාව ඇදගෙන යන්න..."), නවත්වන්න: ශ්‍රිතය() ( $("#dragable").text("මාව ඇදගෙන යන්න") )) ;)); මාව ඇදගෙන යන්න උදාහරණය ධාවනය කරන්න
මූලද්රව්යයක් ඇදගෙන යන විට එහි පෙළ අන්තර්ගතය වෙනස් කිරීමට මෙම උදාහරණය ආරම්භක සහ නැවතුම් සිදුවීම් භාවිතා කරයි. මෙම වාසියට හේතු වී ඇත්තේ ඇදගෙන යා හැකි අන්තර්ක්‍රියාව සම්පුර්ණයෙන්ම HTML සහ CSS භාවිතයෙන් ක්රියාත්මක වීමයි: ඔබට jQuery භාවිතයෙන් ඇදගෙන යා හැකි මූලද්රව්ය තිරය හරහා ගමන් කරන විට පවා එහි තත්වය වෙනස් කළ හැක.
Dropable Interaction භාවිතා කිරීමමූලද්රව්යයක් පමණක් ඇදගෙන යාම සමහර අවස්ථාවන්හිදී ප්‍රමාණවත් විය හැකි නමුත්, Dropable අන්තර්ක්‍රියාව සමඟ එක්ව භාවිතා කරන විට එය වඩාත් ප්රයෝජනවත් වේ.
ඇදහැරිය හැකි අන්තර්ක්‍රියාව භාවිත කර ඇති මූලද්රව්ය (ලබන මූලද්රව්ය) ඇදගෙන යා හැකි අන්තර්ක්‍රියාව භාවිතයෙන් සාදන ලද චංචල මූලද්රව්ය පිළිගැනීමේ හැකියාව ලබා ගනී.
ප්‍රතිග්‍රාහක මූලද්රව්ය නිර්මාණය කර ඇත්තේ droppable() ක්රමය භාවිතා කරමිනි, නමුත් ප්රයෝජනවත් ක්‍රියාකාරීත්වය ලබා ගැනීම සඳහා ඔබට මෙම ආකාරයේ අන්තර්ක්‍රියා සඳහා නිර්වචනය කර ඇති ඒවා අතරින් සිදුවීම් හසුරුවන්නන් නිර්මාණය කිරීමට අවශ්ය වනු ඇත. පවතින සිදුවීම් පහත වගුවේ දක්වා ඇත:
| නිර්මාණය කරනවා | මූලද්රව්යයකට අතහැරිය හැකි අන්තර්ක්‍රියාවක් යෙදූ විට සිදු වේ |
| සක්රිය කරන්න | පරිශීලකයා ගෙන යන මූලද්රව්යය ඇදගෙන යාමට පටන් ගත් විට සිදු වේ |
| අක්රිය කරන්න | පරිශීලකයා ගෙන යන මූලද්රව්යය ඇදගෙන යාම නැවැත්වූ විට සිදු වේ |
| ඉවරයි | පරිශීලකයා ලැබෙන මූලද්රව්යයක් මත පාවෙන මූලද්රව්යයක් ඇදගෙන යන විට සිදු වේ (මූසික බොත්තම තවමත් නිකුත් කර නොමැති නම්) |
| පිටතට | ලැබෙන මූලද්‍රව්‍යයෙන් පිටත ගෙන යන මූලද්රව්යය පරිශීලකයා ඇදගෙන යන විට සිදු වේ |
| පහත වැටීම | පරිශීලකයා මූලද්රව්යය ලබා ගන්නා මූලද්රව්ය මත ගෙන යන විට සිදු වේ |
තනි බිංදු සිදුවීම් හසුරුවන්නක් අර්ථ දක්වා ඇති සරල ලැබීමේ මූලද්රව්යයක් නිර්මාණය කිරීමේ උදාහරණයක් පහත දැක්වේ:
... #ඇදගෙන යා හැකි, #හැරිය හැකි (අකුරු ප්‍රමාණය: විශාල; මායිම: තුනී ඝන කළු; පෑඩිං: 10px; පළල: 100px; පෙළ-පෙළගැස්වීම: මධ්‍ය; පසුබිම-වර්ණය: ලා අළු; මායිම: 4px;) #හැලිය හැකි (පඩිං : 20px; ස්ථානය: නිරපේක්ෂ; දකුණ: 5px;) $(function() ( $("#dragable").draggable(); $("#droppable").dropable(( drop: function() ( $(" #dragable").text("වම") ) ));)); මාව මෙතැනට ඇදගෙන යන්න උදාහරණය ධාවනය කරන්න
මෙම උදාහරණය ලේඛනයට div මූලද්රව්යයක් එක් කරයි, එහි පෙළ අන්තර්ගතය "මෙහි තබන්න" තන්තුවෙන් නියෝජනය වේ. අපි jQuery භාවිතයෙන් මෙම මූලද්රව්යය තෝරාගෙන droppable() ක්රමය අමතන්න, එය drop අවස්ථාව සඳහා හසුරුවන්නක් නිර්වචනය කරන සැකසුම් වස්තුවක් පසුකර යමු. මෙම සිදුවීමට ප්‍රතිචාරය වන්නේ පෙළ() ක්රමය භාවිතයෙන් ගෙන යන මූලද්‍රව්‍යයේ පෙළ වෙනස් කිරීමයි.
මෙම උදාහරණයේ නිර්මාණය කර ඇති Drag-and-drop අන්තර්ක්‍රියාව සරල එකක් වන නමුත් එය ඇදගෙන යා හැකි සහ අතහැරිය හැකි අන්තර්ක්‍රියා එකට ක්රියා කරන ආකාරය පැහැදිලි කිරීම සඳහා ප්රයෝජනවත් සන්දර්භයක් සපයයි. මූලද්රව්ය ඇදගෙන යාමේ ක්රියාවලියේ විවිධ අදියරයන් රූපයේ දැක්වේ:
ඒ සියල්ල ඉතා සරල බව පෙනේ. අපි ගෙන යන මූලද්රව්යය එය ලැබෙන මූලද්‍රව්‍යයට ඉහළින් ඇති තෙක් ඇදගෙන එය මුදා හරිමු. අතහැර දැමූ මූලද්රව්යය එය ඉතිරිව ඇති තැනම පවතින අතර, වැටීමේ සිදුවීමට ප්රතිචාර වශයෙන් එහි පෙළ අන්තර්ගතය වෙනස් වේ. පහත දැක්වෙන කොටස් පරිශීලක අත්දැකීම වැඩිදියුණු කිරීම සඳහා වෙනත් අතහැර දැමිය හැකි අන්තර්ක්‍රියා සිදුවීම් භාවිතා කරන්නේ කෙසේදැයි පෙන්වයි.
ඉලක්ක ලබන වස්තුව ආලෝකමත් කිරීමසක්රිය සහ අක්රිය සිදුවීම් භාවිතා කරමින්, පරිශීලකයා මූලද්රව්යයක් ඇදගෙන යාමේ ක්‍රියාවලිය ආරම්භ කරන විට ඔබට ඉලක්ක ලබන වස්තුව ඉස්මතු කළ හැක. බොහෝ අවස්ථාවන්හිදී, මෙම අදහස ඉතා ඵලදායි වන්නේ එය ඇදගෙන යාමේ ආකෘතියේ කොටසක් වන්නේ කුමන මූලද්‍රව්‍යද යන්න පිළිබඳව පරිශීලකයාට විශ්වාසදායක මග පෙන්වීමක් සපයන බැවිනි. අනුරූප උදාහරණයක් පහත දැක්වේ:
... $(Function() ( $("#dragable").draggable(); $("#dropable").dropable(( drop: function() ( $("#draggable").text("වම ") ), සක්රිය කරන්න: ශ්‍රිතය() ( $("#droppable").css(( මායිම: "මධ්‍යම ද්විත්ව කොළ", පසුබිම් වර්ණය: "lightGreen" )); ), අක්රිය කරන්න: ශ්‍රිතය() ( $("#dropable) ").css("දේශසීමා", "").css("පසුබිම්-වර්ණය", ""); ) );)); ...උදාහරණය ධාවනය කරන්න
පරිශීලකයා මූලද්රව්යයක් ඇදගෙන යාමට පටන් ගත් වහාම, අපගේ ලැබීමේ මූලද්රව්යය හා සම්බන්ධ සක්රිය සිදුවීම ක්රියාත්මක වන අතර, එම මූලද්‍රව්‍යයේ මායිම් සහ පසුබිම්-වර්ණ CSS ගුණාංග වෙනස් කිරීමට හසුරුවන්නාගේ ශ්‍රිතය css() ක්රමය භාවිතා කරයි. එහි ප්රතිඵලයක් ලෙස, ඉලක්ක ලබන මූලද්රව්යය උද්දීපනය වන අතර, එය සහ චලනය වන මූලද්රව්යය අතර සම්බන්ධයක් ඇති බව පරිශීලකයාට පෙන්වයි.
අක්රිය කිරීමේ සිදුවීම ලැබෙන මූලද්‍රව්‍යයෙන් CSS දේපල අගයන් ඉවත් කර එය ආපසු ලබා දීමට භාවිතා කරයි ආරම්භක තත්වය, පරිශීලකයා මූසික බොත්තම මුදා හරින වහාම. (ඇදගෙන යන මූලද්රව්යය ලැබෙන මූලද්‍රව්‍යයේ ඉතිරිව තිබේද නැද්ද යන්න නොසලකා, මූලද්රව්යයක් ඇදගෙන යාම නතර වන විට මෙම සිදුවීම සිදුවේ.) මෙම ක්‍රියාවලිය රූපයේ දැක්වේ:
සිදුවීම් හැසිරවීම වැඩි සහ පිටතට එක් කිරීමෙන් ඇදගෙන යාමේ තාක්ෂණය වැඩිදියුණු කළ හැක. එහා මෙහා සිදුවීම සිදු වන්නේ චලනය වන මූලද්‍රව්‍යයෙන් 50%ක් ලැබෙන මූලද්‍රව්‍යයේ කිසියම් කොටසකට උඩින් වූ විටය. කලින් අතිච්ඡාදනය වූ මූලද්රව්ය තවදුරටත් අතිච්ඡාදනය නොවන විට පිටතට සිදුවීම සිදු වේ. මෙම සිදුවීම් සඳහා ප්රතිචාර දැක්වීමේ උදාහරණයක් පහත දැක්වේ:
$(function() ( $("#dragable").draggable(); $("#dropable").dropable(( drop: function() ( $("#draggable").text("වම") ) , සක්රිය කරන්න: ශ්‍රිතය() ( $("#droppable").css(( මායිම: "මධ්‍යම ද්විත්ව කොළ", පසුබිම් වර්ණය: "lightGreen" )); ), අක්රිය කරන්න: ශ්‍රිතය() ( $("#droppable"). css("දේශසීමා", "").css("පසුබිම්-වර්ණය", ""); ), over: function() ( $("#droppable").css(( මායිම: "මධ්‍යම ද්විත්ව රතු", පසුබිම් වර්ණය : "රතු" )); ); උදාහරණය ධාවනය කරන්න
පෙර උදාහරණයේ දී මෙන් ම හසුරුවන්නාගේ කාර්යයන් මෙහි භාවිතා වේ, නමුත් මෙම අවස්ථාවෙහිදී ඒවා over and out සිදුවීම් සමඟ සම්බන්ධ වේ. ලැබෙන මූලද්රව්යය චලනය වන මූලද්‍රව්‍යයෙන් අවම වශයෙන් 50% ක අතිච්ඡාදනය වන විට, එය රාමුවක කොටු කර ඇති අතර රූපයේ දැක්වෙන පරිදි එහි පසුබිම් වර්ණය වෙනස් වේ:
මෙම 50% සීමාව අතිච්ඡාදනය වන සීමාව (ඉවසීම) ලෙස හැඳින්වේ, ලැබෙන මූලද්රව්යය නිර්මාණය කිරීමේදී එහි අගය සැකසිය හැක, පසුව පෙන්වනු ඇත.
අතහැරිය හැකි අන්තර්ක්‍රියා සැකසීමඅතහැරිය හැකි අන්තර්ක්‍රියාවට එහි හැසිරීම අභිරුචිකරණය කිරීමට ඔබට වෙනස් කළ හැකි ගුණාංග ගණනාවක් ඇත. මෙම ගුණාංග පහත වගුවේ දක්වා ඇත:
| ආබාධිතයි | මෙම විකල්පය සත්‍ය නම්, අතහැරිය හැකි අන්තර්ක්‍රියා ක්‍රියාකාරිත්වය මුලින් අක්රිය වේ. පෙරනිමි අගය අසත්‍යයි |
| පිළිගන්නවා | ලැබෙන මූලද්රව්ය ප්රතිචාර දක්වන චංචල මූලද්රව්ය කට්ටලය පටු කරයි. පෙරනිමි අගය * වේ, එය ඕනෑම මූලද්රව්යයකට ගැලපේ |
| ක්රියාකාරී පන්තිය | සක්රිය සිදුවීමට ප්රතිචාර වශයෙන් පවරනු ලබන සහ අක්රිය සිදුවීමට ප්රතිචාර වශයෙන් ඉවත් කරන පන්තියක් නිර්වචනය කරයි |
| hoverClass | ඉක්මවා ගිය සිදුවීමකට ප්රතිචාර වශයෙන් පවරනු ලබන පන්තියක් නිර්වචනය කරයි සහ බැහැර සිදුවීමකට ප්රතිචාර වශයෙන් ඉවත් කරයි |
| ඉවසීම | අධික සිදුවීමක් සිදුවන අවම අතිච්ඡාදනය ප්‍රමාණය නිර්වචනය කරයි |
ඔබට පිළිගැනීම විකල්පය භාවිතා කිරීමෙන් පහත දැමිය හැකි අන්තර් ක්‍රියාකාරීත්වය ක්‍රියාකාරීත්වය සහිත මූලද්රව්යයක් විසින් පිළිගනු ලබන අතහැරිය හැකි මූලද්රව්ය කට්ටලය සීමා කළ හැක. පිළිගැනීමේ විකල්පයේ අගය තේරීම්කාරකයකට සැකසිය යුතුය. එහි ප්රතිඵලයක් වශයෙන්, ගෙන යන මූලද්රව්යය නිශ්චිත තේරීම්කාරකයට ගැළපේ නම් පමණක් අතහැර දැමිය හැකි අන්තර්ක්‍රියා සිදුවීම් සිදුවනු ඇත. අනුරූප උදාහරණයක් පහත දැක්වේ:
... .dragable, #droppable (font-size: විශාල; මායිම: තුනී ඝන කළු; padding: 10px; පළල: 100px; text-align: center; background-color: lightgray; margin: 4px;) #droppable (padding : 20px; ස්ථානය: නිරපේක්ෂ; දකුණ: 5px;) $(function() ( $(".dragable").draggable(); $("#droppable").dropable(( drop: function(event, ui) ( ui.draggable.text("වමේ") ), සක්රිය කරන්න: ශ්‍රිතය() ($("#dropable").css(( මායිම: "මධ්‍යම ද්විත්ව කොළ", පසුබිම් වර්ණය: "lightGreen" )); ), අක්රිය කරන්න: ශ්‍රිතය () ($("#droppable").css("දේශසීමා", "").css("පසුබිම්-වර්ණය", ""); ), පිළිගන්න: "#drag1" ));)); මෙහි Element 1 Element 2 Run උදාහරණය තබන්න
මෙම උදාහරණයේ drag1 සහ drag2 යන ID සහිත ඇදගෙන යා හැකි මූලද්රව්ය දෙකක් ඇත. ලැබීමේ මූලද්රව්යයක් සාදන විට, අපි පිළිගැනීමේ විකල්පය භාවිතා කරන අතර, ගෙනයාමට පිළිගත හැකි මූලද්රව්ය වන්නේ drag1 මූලද්රව්යය පමණක් බව අපි පෙන්වා දෙමු.
ඔබ drag1 මූලද්රව්යය ඇදගෙන ගිය විට, පෙර උදාහරණවල ඇති බලපෑමම ඔබට පෙනෙනු ඇත. සුදුසු කාලවලදී, සක්රිය, අක්රිය, අවසන් සහ පිටතට යන සිද්ධීන් ලබන මූලද්රව්ය සඳහා දැල්වෙනු ඇත. ඒ සමඟම, ඔබ පිළිගන්නා පරාමිතියෙහි දක්වා ඇති තේරීම්කාරකයට නොගැලපෙන drag2 මූලද්රව්යයක් ඇදගෙන ගියහොත්, මෙම සිදුවීම් වෙඩි නොතබනු ඇත. මෙම මූලද්රව්යය නිදහසේ ගෙන යා හැකි නමුත් එය ලබන මූලද්‍රව්‍යයට නොපෙනේ.
පෙළ() ක්රමය ඇමතීමට පිළිගත හැකි පාවෙන මූලද්රව්යයක් අප තෝරන ආකාරයෙහි වෙනස සැලකිල්ලට ගන්න. ලේඛනයේ එක් චලනය වන මූලද්රව්ය පමණක් තිබූ විට, මේ සඳහා id ගුණාංගය ප්‍රමාණවත් විය:
අතහරින්න: ශ්‍රිතය() ( $("# ඇදගෙන යා හැකි").text("වම") ),
මෙම උදාහරණයේ දී, පාවෙන මූලද්රව්ය දෙකක් ඇති අතර, id attribute මගින් තේරීමෙන් අපේක්ෂිත ප්රතිඵලය නොලැබෙනු ඇත, මන්ද මෙම නඩුවේ පෙළ සෑම විටම එකම පාවෙන මූලද්‍රව්‍යයේ වෙනස් වන බැවින්, ලැබෙන මූලද්රව්ය සඳහා පිළිගත හැකි එකක් කුමක් වුවත්.
විසඳුම වන්නේ jQuery UI මඟින් එක් එක් සිද්ධි හසුරුවන්නාට අමතර තර්කයක් ලෙස සපයන ui වස්තුව භාවිතා කිරීමයි. ui වස්තුවක ඇදගෙන යා හැකි ගුණාංගය මඟින් පරිශීලකයා ඉලක්ක මූලද්රව්යය මත ඇදගෙන යන හෝ වැටීමට උත්සාහ කරන මූලද්රව්යය අඩංගු jQuery වස්තුවක් ආපසු ලබා දෙයි, අපේක්ෂිත මූලද්රව්යය මෙලෙස තෝරා ගැනීමට ඉඩ සලසයි:
අතහරින්න: ශ්‍රිතය(සිද්ධිය, ui) (ui.draggable.text("වම") ),
අතිච්ඡාදනය වීමේ සීමාව වෙනස් කිරීමපෙරනිමියෙන්, වැඩි සිදුවීම සිදු වන්නේ චලනය වන මූලද්‍රව්‍යයෙන් අවම වශයෙන් 50% ක් ලැබෙන මූලද්රව්යය අතිච්ඡාදනය වන විට පමණි. පහත වගුවේ පෙන්වා ඇති අගයන් ගත හැකි ඉවසීමේ විකල්පය භාවිතයෙන් මෙම එළිපත්ත අතිච්ඡාදනය වීමේ ප්‍රමාණය වෙනස් කළ හැක:
මම බොහෝ විට භාවිතා කරන අගයන් දෙක සුදුසු සහ ස්පර්ශ වන බැවින් ඒවා පරිශීලකයින්ට වඩාත් අර්ථවත් කරයි. ඇදගෙන ගිය මූලද්රව්යය එය ගෙන යන ලද ලැබෙන මූලද්‍රව්‍යයේ ප්‍රදේශයේ රැඳී සිටීමට අවශ්ය වූ විට මම සුදුසු බව භාවිතා කරමි, සහ ඇදගෙන ගිය මූලද්රව්ය එහි මුල් ස්ථානයට ආපසු යාමට අවශ්ය විට ස්පර්ශ කරන්න (උදාහරණයක් පහත දැක්වේ). සුදුසු සහ ස්පර්ශ පරාමිතීන් භාවිතා කිරීමේ උදාහරණයක් පහත දැක්වේ:
ක්ලෝන අගය jQuery UI හට ගෙන යන මූලද්‍රව්‍යයේ පිටපතක්, එහි සියලුම අන්තර්ගතයන් සමඟ නිර්මාණය කරන ලෙසත්, එහි ප්රතිඵලය උපකාරක මූලද්රව්යයක් ලෙස භාවිත කරන ලෙසත් කියයි. ප්රතිඵලය රූපයේ දැක්වේ:
පරිශීලකයා ගෙන යන මූලද්රව්යය මත මූසික බොත්තම මුදා හරින විට උපකාරක මූලද්රව්යය ඉවත් කරනු ලැබේ, මූලද්රව්යය ගෙන යන අතර ලැබෙන මූලද්රව්යය ඒවායේ මුල් ස්ථානවල තබයි.
රූපයේ දැක්වෙන පරිදි, ගෙන යන මුල් මූලද්රව්යය ස්ථානයේ පවතින අතර සහායක මූලද්රව්යය පමණක් මූසික දර්ශකය අනුගමනය කරමින් තිරය වටා ගමන් කරයි. චලනය වන මූලද්‍රව්‍යයේ ප්‍රමාණය විශාල නම්, අපගේ උදාහරණයේ මෙන්, එය ඉතිරි ලේඛන අංග ආවරණය කරයි, එවිට පරිශීලකයාට ලැබෙන මූලද්‍රව්‍යයේ පිහිටීම නිරීක්ෂණය කිරීමට පවා අපහසු වනු ඇත. පහත උදාහරණයේ පෙන්වා ඇති පරිදි, උපකාරක විකල්පයේ අගය ලෙස ශ්‍රිතය ලබා දීමෙන් මෙම ගැටලුව සමඟ කටයුතු කළ හැක:
... $(function() ( $("div.draggable")..png"/>") ) ); $("#basket").droppable((activeClass: "active", hoverClass: "hover" )); )); ...උදාහරණය ධාවනය කරන්න
පරිශීලකයා මූලද්රව්යයක් ඇදගෙන යාමට පටන් ගත් විට, jQuery UI උපකාරක පරාමිතිය මගින් නියම කර ඇති ශ්‍රිතය අමතා ආපසු ලබා දෙන මූලද්රව්යය ඇදගෙන යා යුතු වස්තුව ලෙස භාවිතා කරයි. මෙම අවස්ථාවේදී, මම img මූලද්රව්යය නිර්මාණය කිරීමට jQuery භාවිතා කරමි. ප්රතිඵලය රූපයේ දැක්වේ:
කුඩා රූපයක් චලනය වන මූලද්රව්ය සඳහා ප්‍රොක්සියක් ලෙස ක්රියා කරයි, ලේඛනයේ අනෙකුත් මූලද්රව්ය පිළිබඳව සොයා බැලීම වඩාත් පහසු කරයි.
jQuery UI අතහැර දැමිය හැකි අන්තර්ක්‍රියා සිදුවීම් වෙත ලබා දෙන ui වස්තුවෙහි උපකාරක ගුණයක් අඩංගු වන අතර, එය ඇදගෙන යන විට සහායකයා හැසිරවීමට මෙම ගුණාංගය භාවිතා කළ හැක. මෙම දේපල භාවිතා කිරීම පිළිබඳ උදාහරණයක් පහත දක්වා ඇත:
... $(function() ( $("div.draggable")..png"/>") ) ); $("#basket").dropable((activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("දේශසීමා", "ඝන ඝන #27e6ed") ) , පිටතට: ශ්‍රිතය(සිද්ධිය, ui) (ui.helper.css("දේශසීමා", "") ) ); )); ...
මෙහිදී ලැබෙන මූලද්රව්යය අතිච්ඡාදනය වන විට උපකාරක මූලද්රව්යය වටා මායිමක් පෙන්වීමට වැඩි සහ පිට සිදුවීම් සහ ui.helper ගුණය භාවිතා වේ. ප්රතිඵලය රූපයේ දැක්වේ:
ස්නැප් විකල්පය භාවිතා කරමින්, චලනය කරන ලද මූලද්රව්යය එය ගමන් කරන ඊළඟ මූලද්රව්යවල දාරවලට "ආකර්ෂණීය" බව සහතික කළ හැකිය. මෙම විකල්පය තේරීමක් අගයක් ලෙස පිළිගනී. ගෙන යන මූලද්රව්යය නියමිත තේරීමට ගැළපෙන ඕනෑම මූලද්‍රව්‍යයක දාරවලට කඩා වැටෙනු ඇත. Snap විකල්පය භාවිතා කිරීමේ උදාහරණයක් පහත දැක්වේ:
jQuery UI උදාහරණය #snapper, .dragable, .droppable (අකුරු ප්‍රමාණය: විශාල; මායිම: මධ්‍යම ඝන කළු; පෑඩිං: 4px; පළල: 150px; පෙළ පෙළගැස්වීම: මධ්‍ය; පසුබිම-වර්ණය: ලා අළු; ආන්තිකය-පහළ: 10px ධාවනය කරන්න ;).බැසහැරිය හැකි (ආන්තිකය-දකුණ: 5px; උස: 50px; පළල: 120px) #dropContainer (ස්ථානය: නිරපේක්ෂ; දකුණ: 5px;) div span (ස්ථානය: සාපේක්ෂ; ඉහළ: 25%) .droppable.active (මායිම: මධ්‍යම ඝන කොළ) .droppable.hover (පසුබිම් වර්ණය: සැහැල්ලු කොළ) #snapper (ස්ථානය: නිරපේක්ෂ; වම්: 35%; මායිම: මධ්‍යම ඝන කළු; පළල: 180px; උස: 50px) $(ක්‍රියාකාරීත්වය() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "දෙකම", snapTolerance: 50 )); $("#basket").droppable((activeClass: "active", hoverClass: "හෝවර්"));)); Cart Snap මෙන්න මාව ඇදගෙන යන්න
චලනය වන මූලද්රව්යයක් සුදුසු මූලද්රව්යයක් වෙත ළඟා වන විට, එය, ඒවායේ යාබද දාර ස්පර්ශ වන ආකාරයට එයට “ආකර්ෂණය” වේ. එවැනි බැඳීමක් සඳහා, ඔබට ලැබෙන මූලද්රව්යය පමණක් නොව, ඕනෑම මූලද්රව්යයක් තෝරා ගත හැකිය. මෙම උදාහරණයේ දී, මම div මූලද්රව්යයක් එකතු කර, ලේඛනයේ එම මූලද්රව්යය මෙන්ම ලැබෙන මූලද්රව්යය තෝරන අගයකට snap විකල්පය සකසා ඇත.
මූලද්රව්යවල නැංගුරම් හැසිරීම වඩාත් නිවැරදිව අභිරුචිකරණය කිරීමට ඔබට ඉඩ සලසන උපකාරක විකල්ප කිහිපයක් තිබේ. ඒවායින් එකක් වන්නේ snapMode විකල්පයයි. එහි ආධාරයෙන් ඔබට බන්ධන වර්ගය නියම කළ හැකිය. පහත අගයන් අවසර දෙනු ලැබේ: අභ්යන්තර(මූලද්රව්යවල අභ්යන්තර දාර වෙතට යන්න) පිටත(මූලද්රව්යවල පිටත දාරවලට කඩා දමන්න) සහ දෙකම(සියලු දාරවලට කඩා දමන්න; පෙරනිමි).
snapTolerance විකල්පය මඟින් ඔබට පාවෙන මූලද්රව්ය snapping සිදුවීමට පෙර ඉලක්ක මූලද්‍රව්‍යයේ කෙළවරට කොපමණ දුරක් ළඟා විය යුතුද යන්න සඳහන් කිරීමට ඉඩ සලසයි. පෙරනිමි අගය 20, එනම් පික්සල 20 කි. උදාහරණය 50 ක අගයක් භාවිතා කරයි, එය විශාල දුරක් ඇති ස්නැප් එකකට අනුරූප වේ. මෙම විකල්පය සඳහා නිවැරදි අගය තෝරා ගැනීම ඉතා වැදගත් වේ. snapTolerance අගය ඉතා අඩු නම්, පරිශීලකයා snapping ප්‍රයෝගය නොදකිනු ඇත, එය ඉතා ඉහළ නම්, ගෙන යන මූලද්රව්යය අනපේක්ෂිත පැනීම් ඇති කිරීමට පටන් ගනී, දුරස්ථ මූලද්රව්ය වෙත කඩා වැටේ.
තාක්ෂණය භාවිතා කිරීම ඇදගෙන යන්න(drag and drop) පරිශීලකයාට විවිධ වස්තු එකකින් තවත් එකකට ගෙන යාමට ඉඩ සලසයි, උදාහරණයක් ලෙස, එක් ලැයිස්තුවක මූලද්රව්ය තවත් එකකට. මෙය සිදු කිරීම සඳහා, ඔබ පාලනයන් දෙකක් භාවිතා කළ යුතුය: සින්ක් සහ මූලාශ්රය. ග්‍රාහකයා යනු මූලාශ්‍ර වස්තුව (චලනය වන වස්තුව) ලබන වස්තුවයි.
වස්තූන්ගේ චලනය අතරතුර සිදුවන සිදුවීම් ඒවා සිදුවන අනුපිළිවෙලින් පහත දැක්වේ.
OnStartDrag(type TStartDragEvent) - මෙහෙයුම ආරම්භයේදී, මූලාශ්‍ර වස්තුව මගින් ජනනය කරනු ලැබේ. සිදුවීම් හසුරුවන්නා වෙත ලබා දෙන පරාමිති: DragObject ග්‍රාහක වස්තුව (TDragObject වර්ගය), මූලාශ්‍ර වස්තුව (TObject වර්ගය).
OnDragOver(TDragOverEvent ටයිප් කරන්න) - ඇදගෙන ගිය වස්තුවක් උඩින් ඇති විට ග්‍රාහක වස්තුවක් නිර්මාණය කරයි. සිදුවීම් හසුරුවන්න වෙත ලබා දෙන පරාමිති: ග්‍රාහක වස්තුව යවන්නා (වර්ගය TObject), මූලාශ්‍ර වස්තුව මූලාශ්රය (TObject වර්ගය), චලන තත්ත්‍වය (TDragState වර්ගය), X සහ Y (වර්ගය පූර්ණ සංඛ්යාව) - මූසික දර්ශකයේ වත්මන් ඛණ්ඩාංක, පිළිගන්න ( බූලීන් වර්ගය ) චලනය කිරීමේ මෙහෙයුම තහවුරු කිරීමේ ලකුණ. චලනය වන වස්තුව ග්‍රාහක ප්‍රදේශයේ තිබේද, එහි චලනය වන්නේද, නැතහොත් එය අත්හැර දමා තිබේද යන්න චලන තත්වය පැහැදිලි කරයි. සම්මත කරන ලද පරාමිති මඟින් ගමනාන්ත වස්තුවට මූලාශ්‍ර වස්තුව පිළිගැනීමට හෝ ප්‍රතික්ෂේප කිරීමට හැකියාව ලැබේ. චලනය කිරීමේ මෙහෙයුම පිළිගන්නේ නම්, පිළිගන්න පරාමිතිය Trye ලෙස සකසා ඇත, එසේ නොමැති නම් එය වැරදි ලෙස සකසා ඇත.
onDragDrop (TDragDropEvent වර්ගය) - ඇදගෙන ගිය වස්තුව එය මතට දැමූ විට ග්‍රාහක වස්තුව මගින් ජනනය වේ. මූසික දර්ශකය, යවන්නා ග්‍රාහක වස්තුව (TObject වර්ගය) සහ මුල් චලන වස්තුව මූලාශ්රය (TObject වර්ගය) හි වත්මන් ඛණ්ඩාංක සිදුවීම් හසුරුවන්නා සමත් වේ.
onEndDrag (EndDragEvent වර්ගය) - ඇදගෙන යාමේ මෙහෙයුමක් සම්පූර්ණ වූ විට ඉහළ නැංවෙයි. මූලාශ්‍ර යවන්නා වස්තුව සහ ග්‍රාහක ඉලක්ක වස්තුව සිදුවීම් හසුරුවන්නා වෙත ලබා දෙන ලක්ෂ්‍යයේ X සහ Y ඛණ්ඩාංක.
ඇදගෙන යාමක් නිර්මාණය කිරීම සඳහා, සිදුවීම් දෙකක් ක්රියාත්මක කිරීම ප්‍රමාණවත් වේ: OnDragDrop සහ OnDragOver DragMode ගුණාංගය dmAutomatic ලෙස සකසා ඇත. එසේ නොමැතිනම්, ඇදගෙන යාමේ මෙහෙයුමේ ආරම්භය, BeginDrag ක්රමය, ක්රමලේඛකයා විසින් සංකේතනය කළ යුතුය.
ද්රව්යය ඒකාබද්ධ කිරීම සඳහා, අපි පහත යෙදුම නිර්මාණය කරමු. පෝරමය මත පැනල් සංරචකය තබන්න. Object Inspector හි DragMode ගුණාංගය dmAutomatic ලෙස සකසන්න. අපි පෝරමය වස්තුව තෝරා පහත සිදුවීම් නිර්මාණය කිරීමට වස්තු පරීක්ෂක භාවිතා කරමු:
ක්රියා පටිපාටිය TForm1.FormDragOver(යවන්නා, මූලාශ්රය: TObject; X, Y: Integer; State: TDragState; var පිළිගන්න: Boolean); Source = Panel1 නම් ආරම්භ කරන්න එවිට පිළිගන්න:= සත්‍ය වෙනත් පිළිගන්න:= අසත්‍ය; අවසානය; ක්රියා පටිපාටිය TForm1.FormDragDrop(යවන්නා, මූලාශ්රය: TObject; X, Y: පූර්ණ සංඛ්යාව); Panel1 ආරම්භ කරන්න.වමේ:= X; Panel1.ඉහළ:= Y; අවසානය;
දැන් යෙදුම දියත් කිරීමෙන් සහ පැනලයට ඉහළින් ඇති මූසික බොත්තම ක්ලික් කිරීමෙන්, අපට පැනල වස්තුව පෝරමය පුරා ගෙන යා හැක.
පහළ රේඛාව: අපි තාක්ෂණය සමඟ දැන හඳුනා ගත්තා ඇදගෙන යන්න(drag and drop) සහ එය ප්රායෝගිකව භාවිතා කරන ලදී.
ඇදගෙන යාමේ තාක්ෂණය වසර ගණනාවක් පුරා විකාශනය වී ඇත. විවෘත කේත ප්ලගීන (jQuery වැනි) සංවර්ධනය කරන ක්‍රමලේඛකයින් සංඛ්යාව වැඩි වීමත් සමඟ පැරණි ක්රම නැවත පණ ගැන්වීම පුදුමයක් නොවේ. ජාවාස්ක්‍රිප්ට් පුස්තකාලය ඉතා ඉහළ ප්රතිචාර දක්වන අතර වෙබ් තාක්ෂණයේ මෙම යුගයේ බොහෝ වැඩිදියුණු කිරීම් ඉදිරිපත් කරයි.
මෙම නිබන්ධනයේදී අපි ඔබේ වෙබ් අඩවියේ ගතික ඇදගෙන යාමේ සෘජුකෝණාස්‍ර සෑදීමට භාවිතා කළ හැකි ස්ක්‍රිප්ට් එකක් සාදන්නෙමු. ක්‍රියාවලිය කළමනාකරණය කරනු ලබන්නේ jQuery විසිනි. එවැනි ස්ක්‍රිප්ට් සූදානම් කළ ක්‍රියාකාරිත්වය ලබා දීමෙන් කාලය ඉතිරි කරයි! තවද drag-and-drop පුස්තකාලය වෙනත් ව්යාපෘති සඳහා භාවිතා කළ හැක.
මුලින්ම අපි ව්‍යාපෘතිය සඳහා කුඩා වෙබ් අඩවියක් සකස් කරමු. ව්යාපෘති ෆෝල්ඩරය තුළ ඔබට "js" සහ "css" සහ හිස් ගොනුවක් සහිත නාමාවලි දෙකක් සෑදිය යුතුය. index.html. කේතය ඉතා සරල වනු ඇත, එවිට කාර්යය පිළිබඳ පැහැදිලි අදහසක් ඇති අතර වැඩිදුර සංවර්ධනය සඳහා කරුණක් ඇත.
පහත දැක්වෙන්නේ අපගේ HTML ගොනුවේ කේතයයි. පරිච්ඡේදයේ හිසඅපි ස්ක්‍රිප්ට් 3ක් ඇතුලත් කරනවා. ප්රධාන jQuery ස්ක්‍රිප්ට් එක Google කේත සේවාදායකයෙන් පූරණය වේ. අපගේ ශෛලිය ගොනුව style.css ද ඇතුළත් වේ, සැකසීම සඳහා ප්රධාන ගුණාංග අඩංගු වේ පෙනුමඅපගේ ලේඛනය.
මාව ඇදගෙන යන්න ඔව් ඔව්. හරියටම මම. ඔබට මාවත් ඇදගෙන යා හැක (zIndex: 200, පාරාන්ධතාවය: .9 )
P.S.: ඔබට මාව ඕනෑම තැනක දාලා යන්න පුළුවන්!
ඇතුළත කොටස සිරුරකුට්ටි දෙකක් පමණක් තබා ඇත div, සෘජුකෝණාස්රා දෙකම අඩංගු වේ. කේතය තරමක් සරල සහ තේරුම්ගත හැකි ය. එක් එක් සෘජුකෝණාස්රය තුළ පන්ති හසුරුවන්නා සහ හසුරුවන්න2 සමඟ ශීර්ෂ ඇත. ඔබ ඇදගෙන යන විට එක් එක් සෘජුකෝණාස්රය වෙනස් ලෙස හැසිරෙන නිසා මෙය වැදගත් වේ.
HTML කේතය ඉතා සරලයි. ඔබ මූලික සලකුණුකරණය තේරුම් ගන්නේ නම්, CSS මෝස්තර ද අපහසු නොවනු ඇත. ප්රධාන වශයෙන් අර්ථ දක්වා ඇති මායිම්, පිරවුම් සහ වර්ණ.
ශරීරය, html ( font-family:Calibri, sans-serif; පසුබිම:#eaf3fb; font-size:12px; උස:1000px; line-height:18px; ) p ( height:30px; )
තේරීම් කරන්නන් ශරීරය, html demo පිටුව සඳහා පමණක් භාවිතා වේ. තවද සියලුම අන්තර්ගතය ඇදගෙන යා හැකි සෘජුකෝණාස්රා දෙකක් තුළ තබා ඇත.
Dv1 (පළල:200px; පසුබිම්-වර්ණය:#eff7ff; මායිම:1px ඝන #96c2f1; ස්ථානය:නිරපේක්ෂ; වමේ:100px; ඉහළ:100px; ) .dv1 h2 (පසුබිම්-වර්ණය:#b2d3f5; padding:5px; font- පවුල:ජෝර්ජියා, "ටයිම්ස් නිව් රෝමන්", ටයිම්ස්, සෙරිෆ්; අකුරු ප්‍රමාණය: 1.0em; පෙළ-පරිවර්තනය: ලොකු අකුරු; අකුරු-බර: තද; වර්ණය:#3a424a; ආන්තිකය: 1px; කර්සරය: චලනය; .dv1 div (padding:5px; margin-bottom:10px; ) .dv2 (පසුබිම්-වර්ණ:#f6ebfb; මායිම:1px ඝන #a36fde; පළල:550px; ස්ථානය: නිරපේක්ෂ; කර්සරය: චලනය; වමේ: 400px; ඉහළ: 230px; ) .dv2 h2 (පසුබිම්-වර්ණය:#eacfe9; අකුරු පරතරය:-0.09em; අකුරු-ප්‍රමාණය:1.8em; අකුරු-බර: තද; පෑඩිං:15px; ආන්තිකය:1px; වර්ණය:#241f24; කර්සරය: චලනය; ) .dv2 .content2 (padding:5px; margin-bottom:10px; )
.dv1 සහ .dv2 පන්ති දෙකම සඳහා අපි නිරපේක්ෂ ස්ථානගත කිරීම භාවිතා කරමු. මෙය අවශ්ය නොවන අතර බොහෝ විට වඩාත්ම නොවේ හොඳම මාර්ගයඇදගෙන යා හැකි සෘජුකෝණාස්රා ස්ථානගත කිරීමට. කෙසේ වෙතත්, අපගේ උදාහරණය සඳහා, මෙම ස්ථානගත කිරීම අර්ථවත් කරයි, පිටුව නැවුම් කරන සෑම අවස්ථාවකම, සෘජුකෝණාස්රා යම් ස්ථානවල ස්ථාපනය කර ඇත.
වෙනස දැකීමට පහසු වන පරිදි සෘජුකෝණාස්‍ර සඳහා අකුරු සහ වර්ණ වෙනස් වේ.
එසේ නොමැති නම්, බ්ලොක් වල ශීර්ෂයන් සහ අන්තර්ගතය බොහෝ දුරට සමාන වේ. ඔබ ඔබේ ව්‍යාපෘතියට මෝස්තර පිටපත් කරන්නේ නම්, ආරම්භ කිරීමට පෙර නම් වෙනස් කරන්න. සමහර අවස්ථාවලදී, එක් විශේෂිත බ්ලොක් එකක් සඳහා ඇදගෙන යාමේ තාක්ෂණය භාවිතා කරන විට, පන්ති වෙනුවට හැඳුනුම්පත් භාවිතා කිරීම වඩාත් තර්කානුකූලයි.
JavaScript විග්‍රහ කිරීමJavaScript ගොනු දෙකක එය ක්රියා කිරීමට අවශ්ය සියලුම කේතයන් අඩංගු වේ. මෙය පාඩමේ විෂය පථයට ඔබ්බෙන් වන බැවින් අපි jQuery සමඟ වැඩ කිරීමේ විස්තර මඟ හරිමු. jquery.dragndrop.js ගොනුව වෙත අවධානය යොමු කරමු.
22 පේළිය Drags ශ්‍රිතය නිර්වචනය කරයි.
ඩොලර් );
මෙය ආපසු හැරීමේ විචල්‍යය සහ ආරම්භක දත්ත සකසයි ඇදගෙන යයි. jQuery සමඟ වැඩ කිරීමේදී විකල්ප වෙනත් කාර්යයන් වෙත යැවීමට මෙම ක්රමය බහුලව භාවිතා වේ. අභ්‍යන්තරව අපි ඇදගෙන යන සෘජුකෝණාස්‍ර සඳහා පවතින සියලුම විකල්ප සඳහා විචල්‍ය සකසමු.
ඊළඟ කේත කොටසෙහි dragndrop විචල්‍යය සඳහා සිදුවීම් හසුරුවන්න ඇතුළත් වේ. සිදුවීම් දෙකම ඇදගෙන යන්නසහ පහත වැටීමසිදුවීම් පරාමිති ලබා දෙන කාර්යයන් අමතන්න. ඔබ වස්තුවක් ඇදගෙන එය මුදා හැරීමට මූසික බොත්තම එබූ විට මෙම සිදුවීම් සිදු වේ.
Var dragndrop = ( ඇදගෙන යන්න: ශ්‍රිතය(e) (var dragData = e.data.dragData; dragData.target.css((වමේ: dragData.left + e.pageX - dragData.offLeft, top: dragData.top + e. - dragData.offTop )); dragData.handler.css(( cursor: "move" )); dragData.target.css (( cursor: "move" )); dragData.onMove(e); ), drop: function( e) (var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(("පාරාන්ධතාවය": "" )); dragData.handler.css("කර්සරය", dragData. oldCss.cursor);dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); ) )
අපගේ කාර්යයන් එක් එක් වස්තුවේ CSS ස්ථානගත කිරීම හසුරුවයි. සෑම ජාවාස්ක්‍රිප්ට් ශ්‍රිතයක්ම වස්තුව සඳහා නිර්වචනය කර ඇති විලාසය වෙනස් කරන බැවින්, ඔබේ වස්තුවේ නිරපේක්ෂ ස්ථානගත කිරීම වෙනස් කිරීම ඔබේ කේතය ක්රියා කරන ආකාරය කෙරෙහි බලපාන්නේ නැත.
ඉතිරි කේතය හසුරුවන්නා පරීක්ෂා කර වෙනත් මෝස්තරවලට රූපලාවන්‍ය වෙනස්කම් සිදු කරයි. මෙහිදී ඔබට විනිවිදභාවය, අකුරු සහ අකුරු වර්ණයට වෙනස්කම් එක් කළ හැකිය, නැතහොත් නව ඡේද එකතු කළ හැකිය.
Drag/Drop කාර්යයන්දෙවන fn.js ගොනුවේ ඉතා සරල කේතයක් අඩංගු වේ. අපි බලාගෙන ඉන්නවා සම්පූර්ණ පැටවීමලේඛනය, ඉන් පසුව අපි අපගේ කාර්යයන් ලෙස හඳුන්වමු. ශ්‍රිතයේ අවස්ථා දෙකක් අර්ථ දක්වා ඇත ඇදගෙන යයි, කලින් සාකච්ඡා කළ.
.dv1 සහ .dv2 පන්ති සහිත චංචල කුට්ටි දෙකක් අප සතුව ඇත. ඔබට එක් චලනය කළ හැකි බ්ලොක් එකක් අත්හැරීමට අවශ්ය නම්, ඔබට කේතයේ දෙවන කොටස ඉවත් කිරීමට අවශ්ය වේ. තවත් චලනය කළ හැකි බ්ලොක් එකක් එකතු කිරීම ද පහසුය. ඔබට මෙම ගොනුව තුළ නව කාර්යයක් එක් කිරීමට අවශ්ය වේ.
පළමු පියවර වන්නේ ශ්‍රිතය ඇමතීමේ දී විකල්ප සැකසීමයි. හසුරුවන්නාගේ නම සැකසීමට වග බලා ගන්න. එය සමඟ, ලේඛනයේ යම් ප්‍රදේශයක මූසික බොත්තම එබූ විට භාවිතා කළ යුත්තේ කුමන හසුරුවන්නද යන්න අපි jQuery ට කියමු. හසුරුවන්නාගේ නම පන්තියක් හෝ ID ගුණාංගයක් විය හැක.
අපගේ පළමු කාර්යයට onMove සහ onDrop සිදුවීම් හසුරුවන්න දෙකක් ඇත. මේ දෙකම වත්මන් සිදුවීමට යවන නව ශ්‍රිතයන් විචල්‍යයන් ලෙස හඳුන්වයි. එක් එක් චලනය සමඟ යාවත්කාලීන කිරීම සඳහා සෘජුකෝණාස්රයේ HTML කේතය හසුරුවන්නේ මෙහිදීය. සරල jQuery සිදුවීම් භාවිතයෙන් ඔබට ක්‍රියාවලියක් පාලනය කළ හැකි ආකාරය නිරූපණය කිරීම සඳහා මෙය විශිෂ්ට බලපෑමක් වේ.
දෙවන කාර්යයේදී අපි z-දර්ශක සහ පාරාන්ධතා පරාමිතීන් භාවිතා කරමු. ඔබට වෙනත් CSS ගුණාංග එකතු කළ හැකිද? නමුත් මේ සඳහා ජාවාස්ක්‍රිප්ට් කේතය නැවත සකස් කිරීම අවශ්ය වන අතර එමඟින් සැකසුම් පරීක්ෂා කෙරේ. උදාහරණයක් ලෙස, ඔබට චලනය වන සෘජුකෝණාස්‍රයක උස සහ පළල සඳහා වෙනස් අකුරු විලාසයක් හෝ අගයන් සම්මත කළ හැකිය - ඉතා සිත්ගන්නා උපක්‍රමයක්!
නිගමනයවැඩ ටිකක් සමඟින්, අපට දැන් විශාල ඇදගෙන යාමේ අතුරු මුහුණතක් අප සතුව ඇත. jQuery ඔවුන්ගේ ව්‍යාපෘතිවල පැරණි ක්රම භාවිතා කිරීමට උනන්දු වන සංවර්ධකයින් සඳහා විශාල ප්‍රතිලාභ ලබා දෙයි.
එහි ප්රතිඵලයක් වශයෙන්, අපට සිද්ධි හසුරුවන්නෙහි කාර්යයන් පමණක් නොව, ඇදගෙන යා හැකි කොටස් වෙත නව විචල්‍යයන් ද ලබා දිය හැක. මෙය නිර්මාණශීලීත්වය සඳහා නව අවස්ථා විවෘත කරයි. පාඩම සඳහා වන නිරූපණයේ අඩංගු වන්නේ එවැනි කේතයක් භාවිතයෙන් කළ හැකි දේ පිළිබඳ දළ සටහනක් පමණි.
එබැවින් පුස්තකාල කාර්යයන් භාවිතා කිරීමට jQuery ලේඛන පරීක්ෂා කරන්න.
VCL පුස්තකාලය සඳහා, Borland විසින් Drag&Drop අතුරුමුහුණතේ තමන්ගේම අනුවාදයක් ක්රියාත්මක කර ඇත ("drag and drop" ලෙස පරිවර්තනය කර ඇත). මෙම අතුරුමුහුණත අභ්යන්තර වේ - ඔබට පෝරමය තුළ ඕනෑම ඩෙල්ෆි පාලනයක් යැවීමට සහ ලබා ගැනීමට හැකිය (පෝරමයම හැර) එය ක්රියාත්මක කරනු ලබන්නේ අනුරූප Windows API කාර්යයන් භාවිතා නොකර - ඇදගෙන යාමෙන් සහ වැටීමෙන් වෙනත් කාර්යයන් සමඟ සන්නිවේදනය සංවිධානය කිරීමේදී ඒවා භාවිතා කළ යුතුය.
පාලනයක් මත වම් මූසික බොත්තම ක්ලික් කිරීමෙන්, අපට එය වෙනත් ඕනෑම මූලද්රව්යයකට "ඇදගෙන" හැක. ක්‍රමලේඛකයෙකුගේ දෘෂ්ටි කෝණයෙන්, මෙයින් අදහස් කරන්නේ යතුරක් ඇදගෙන යාමේ සහ මුදා හැරීමේ මොහොතේදී, අවශ්ය සියලු තොරතුරු සම්ප්‍රේෂණය කරන ඇතැම් සිදුවීම් ජනනය වන බවයි - ඇදගෙන ගිය වස්තුවට දර්ශකයක්, කර්සරයේ වත්මන් ඛණ්ඩාංක යනාදිය. සිදුවීම් වල කර්සරය දැනට පිහිටා ඇති මූලද්රව්යය වේ. එවැනි සිදුවීමක් සඳහා හසුරුවන්නා විසින් පාලනයට යැවීම ලැබෙන්නේද නැද්ද යන්න පද්ධතියට පැවසිය යුතුය. ලැබීමේ පාලනයට ඉහලින් ඇති බොත්තම මුදා හරින විට, ග්‍රාහකයාගේ සූදානම අනුව තවත් සිදුවීම් එකක් හෝ දෙකක් ජනනය වේ.
CancelDrag වත්මන් ඇදගෙන යාම හෝ ඇද දැමීමේ මෙහෙයුම අවලංගු කරයි.
Function FindDragTarget (const Pos: TPoint ; AllowDisabled: Boolean ): TControl ;
ශ්‍රිතය TControl මූලික පන්තියේ වස්තුවක් ආපසු ලබා දෙයි, එය Pos පරාමිතිය මගින් අර්ථ දක්වා ඇති ඛණ්ඩාංක සමඟ තිරයේ පිහිටීම සඳහන් කරයි. මෙම ශ්‍රිතය drag-and-drop හෝ drag-and-dock මෙහෙයුමක විභව ලබන්නා තීරණය කිරීමට භාවිතා කරයි. නිශ්චිත ස්ථානය සඳහා කවුළු පාලනයක් නොමැති නම්, ශ්‍රිතය nil වෙත ආපසු යයි. AllowDisabled පරාමිතිය ආබාධිත වස්තූන් සැලකිල්ලට ගන්නේද යන්න තීරණය කරයි.
ශ්‍රිතය IsDragObject(යවන්නා: TObject): Boolean;
යවන්නාගේ පරාමිතියෙහි දක්වා ඇති වස්තුව TDragObject පන්තියෙන් පැවත එන්නක් ද යන්න ශ්‍රිතය තීරණය කරයි. මෙම ශ්‍රිතය OnDragOver සහ OnDockOver සිදුවීම් හසුරුවන්නෙහි මූලාශ්‍ර පරාමිතිය ලෙස ඇදගෙන ගිය වස්තුව පිළිගනු ලබන්නේද යන්න තීරණය කිරීමට භාවිත කළ හැක. ඇදගෙන ගිය වස්තුව නිවැරදිව අර්ථ දැක්වීම සඳහා OnDragDrop සහ OnDockDrop සිදුවීම් හසුරුවන්නෙහි මූලාශ්‍ර පරාමිතිය ලෙස IsDragObject ශ්‍රිතය ද භාවිතා කළ හැක.
ගුණාංග DragMode, DragCursor, ක්රම BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, Accept පරාමිතිය
මූසිකය භාවිතයෙන් තොරතුරු එක් වස්තුවක සිට තවත් වස්තුවකට ඇදගෙන යාමේ ක්‍රියාවලිය වින්ඩෝස් හි බහුලව භාවිතා වේ.ඔබට ෆෝල්ඩර අතර ගොනු ගෙනයාම, ෆෝල්ඩර ම ගෙනයාම යනාදිය හැක.
ඩ්‍රැග්-ඇන්ඩ්-ඩ්‍රොප් ක්‍රියාවලියට සම්බන්ධ සියලුම ගුණාංග, ක්රම සහ සිදුවීම් TControl පන්තියේ නිර්වචනය කර ඇත, එය සියලුම Delphi දෘශ්‍ය සංරචකවල ප්‍රධානියා වේ. එබැවින් ඒවා සියලු සංරචක සඳහා පොදු වේ.
ඇදගෙන යාමේ ආරම්භය DragMode ගුණාංගය මගින් තීරණය කරනු ලැබේ, එය සැලසුම් වේලාවේදී හෝ ක්‍රමලේඛනාත්මකව dmManual හෝ dmAutomatic ට සමාන විය හැක. dmAutomatic අගය මඟින් පරිශීලකයා සංරචකයක් මත මූසික බොත්තමක් එබූ විට ඇදගෙන යාමේ ක්‍රියාවලිය ස්වයංක්‍රීයව ආරම්භ වේද යන්න සඳහන් කරයි. කෙසේ වෙතත්, මෙම අවස්ථාවේදී, පරිශීලකයා මූසික බොත්තම ක්ලික් කිරීම හා සම්බන්ධ OnMouseDown සිදුවීම මෙම සංරචකය සඳහා කිසිසේත්ම සිදු නොවේ.
සංරචක මාරු කිරීම සහ ලබා ගැනීම සඳහා අතුරු මුහුණත බොහෝ කලකට පෙර දර්ශනය විය. එය යෙදුම ක්රියාත්මක වන අතරතුර පාලන දෙකක් අන්තර්ක්‍රියා කිරීමට ඉඩ සලසයි. මෙම අවස්ථාවේදී, අවශ්ය ඕනෑම මෙහෙයුම් සිදු කළ හැකිය. ක්රියාත්මක කිරීමේ පහසුව සහ දිගුකාලීන සංවර්ධනය තිබියදීත්, බොහෝ වැඩසටහන්කරුවන් (විශේෂයෙන් ආරම්භකයින්) මෙම යාන්ත්රණය නොපැහැදිලි සහ විදේශීය ලෙස සලකයි. කෙසේ වෙතත්, Drag-and-Drop භාවිතා කිරීම ඉතා ප්රයෝජනවත් සහ ක්රියාත්මක කිරීමට පහසු විය හැක. දැන් අපි මෙය සහතික කරමු.
යාන්ත්රණය ක්රියා කිරීම සඳහා, ඒ අනුව පාලන දෙකක් වින්‍යාසගත කළ යුතුය. එකක් මූලාශ්‍රයක් (මූලාශ්‍රයක්) විය යුතුය, දෙවැන්න ග්‍රාහකයක් (ඉලක්කය) විය යුතුය. මෙම අවස්ථාවෙහිදී, මූලාශ්රය ඕනෑම තැනක චලනය නොවේ, නමුත් යාන්ත්රණය තුළ පමණක් ලියාපදිංචි වී ඇත.
මාව විශ්වාස කරන්න, OnDragOver සහ OnDragDrop සිදුවීම්වල පරාමිතීන් තුළ සම්මත වූ X,Y ඛණ්ඩාංක ආකෘති ඛණ්ඩාංක බවට පරිවර්තනය කිරීම ප්‍රමාණවත්ය.
කර්සරය චලනය වන සංරචකයේ වම් සහ ඉහළ ගුණාංග සමඟ වැඩ කරන්න. මම ඔබට සරල උදාහරණයක් කියන්නම්. පෝරමය මත Memo සංරචකයක් තබා alTop ලෙස පෙළගස්වන දේපල සකසන්න. පෝරමය මත පැනලයක් තබා, Align දේපල alTop ලෙස සකසා උස ගුණය කුඩා අගයකට සකසන්න, පික්සල 6ක් හෝ 7ක් කියන්න. DragMode dmAutomatica ලෙසත් DragCursor crVSplit ලෙසත් සකසන්න. වෙනත් Memo සංරචකයක් තබා AlClient වෙත පෙළගස්වන්න. සමගාමීව Memo සංරචක දෙකම තෝරන්න, පැනලය සහ පහත දැක්වෙන පරිදි පොදු OnDragOver සිදුවීම් හසුරුවන්නක් සාදන්න:
ලගදි මට අදහසක් ආවා Android වලට Game එකක් develop කරන්න පටන් ගන්න. ආරම්භ කිරීමට, මම චෙස් ලිවීමට තීරණය කළා. රූප චලනය කිරීමේ යාන්ත්රණය ක්රියාත්මක කිරීම සඳහා ඩ්‍රැග් ඇන්ඩ් ඩ්‍රොප් තාක්ෂණය පරිපූර්ණ වනු ඇතැයි මට පෙනුණි. නොදන්නා අය සඳහා, ඇදගෙන යාමේ ක්රමය යනු එක් ග්‍රැෆික් වස්තුවක් තවත් එකකට ඇදගෙන එය මුදා හැරීමෙන් පසු එක් හෝ තවත් ක්‍රියාවක් කිරීමට ඇති හැකියාව බව මම සටහන් කරමි. සරලම උදාහරණය නම් ඔබේ පරිගණකයේ ඩෙස්ක්ටොප් එකෙන් කෙටිමඟක් කුණු කූඩයට ඇද දැමීමෙන් මකා දැමීමයි. ලේබලය කුණු කූඩයට දැමීමෙන්, අපි මෙම වස්තු දෙක අන්තර්ක්‍රියා කිරීමට බල කිරීමට අවශ්ය බව පද්ධතියට කියමු. පද්ධතිය අපගේ සංඥාව ලබා ගන්නා අතර එය ගත යුතු ක්රියාමාර්ගය තීරණය කරයි. එහි බුද්ධිමය පැහැදිලිකම නිසා ඇදගෙන යාම පුළුල් වී ඇත. මෙම ප්‍රවේශය සැබෑ ලෝකයේ වස්තු සමඟ අන්තර් ක්රියා කිරීමේ අපගේ අත්දැකීම් මගින් අනුබල දෙන අතර අතථ්‍ය පරිසරයක විශිෂ්ට ලෙස ක්රියා කරයි. චෙස් සම්බන්ධයෙන් ගත් කල, ඩ්‍රැග් ඇන්ඩ් ඩ්‍රොප් භාවිතයෙන් පරිශීලකයා කැබැල්ල ඇදගෙන ගිය සෛලය තීරණය කිරීම තාක්‍ෂණිකව පහසු වේ, මන්ද මුදා හැරීමේ ලක්ෂ්‍යයේ ඛණ්ඩාංක වලින් සෛල අංකය ගණනය කිරීමට අවශ්ය නොවන බැවිනි. මෙම කාර්යය අතථ්‍ය යන්ත්‍රය විසින් පවරා ගනු ඇත.
ඩ්‍රැග් ඇන්ඩ් ඩ්‍රොප් තාක්ෂණය භාවිතා කිරීමෙන් මට සුළු පරිශ්‍රමයකින් ගැටළු තුනක් විසඳීමට ඉඩ සලසයි:
කාර්යයන් විස්තර කර ඇත, අපි ඒවා ක්රියාත්මක කිරීමට පටන් ගනිමු.
ස්පර්ශය මත ImageView ආදේශනයමගේ හැඩතල සියල්ල ImageView වස්තු වේ. අවාසනාවකට මෙන්, ඇන්ඩ්‍රොයිඩ් හි ඩ්‍රැග් ඇන්ඩ් ඩ්‍රොප් ක්රියාත්මක කිරීම වස්තුවක් ස්පර්ශ කරන විට එහි රූපය ප්‍රතිස්ථාපනය කිරීමට “පෙට්ටියෙන් කෙළින්ම” ඉඩ නොදෙන බව පෙනී ගියේය. කෙසේ වෙතත්, මෙම කාර්යය API භාවිතයෙන් සම්පූර්ණයෙන්ම විසඳා ගත හැකිය. අපි සරල පියවර ගණනාවක් සිදු කිරීමට අවශ්ය වනු ඇත:
මෙම ක්රියා ImageView වස්තුවේ OnTouchListner හසුරුවෙහි ක්රියාත්මක කළ යුතුය. මෙය සිදු කිරීම සඳහා, අපි onTouch ක්රමය අභිබවා යමු:
@ Override public boolean onTouch(View view, MotionEvent motionEvent) (නම් (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View.BuildowDragshadbowder. (දර්ශනය) ; බලන්න. startDrag (clipData, dsb, view, 0 ) ; බලන්නසෑම දෙයක්ම ඉතා සරලයි. එබැවින්, අපි රූප ආදේශනය නිරාකරණය කර ඇත, අපි ඊළඟ කාර්යයට යමු.
ඇද වැටීමේ කාර්යය සඳහා ඇදගෙන යාමේ ප්රදේශය සීමා කිරීමඇදගෙන යන ප්රදේශය සීමා කිරීමේ ගැටලුවක් ඇත. කාරණය නම්, ඔබ පුවරුවෙන් පිටත කැබැල්ලක් මුදා හැරියහොත්, පහත වැටීම සිදු නොවනු ඇත, මන්ද පරිශීලකයා වස්තුව හිස් අවකාශයක මුදා හැර ඇති අතර වස්තුවට අන්තර්ක්‍රියා කිරීමට කිසිවක් නැත. එහි ප්රතිඵලයක් වශයෙන්, රූපය එහි මුල් තත්වයට නොපැමිණෙන අතර සදහටම සැඟවී පවතිනු ඇත. මම ප්‍රලේඛනය කියවීමට බොහෝ කාලයක් ගත කළ නමුත් වස්තූන්ගේ ඇදගෙන යාමේ ප්රදේශය සීමා කිරීමට මට ක්‍රමයක් සොයාගත නොහැකි විය. තීක්ෂ්ණ බුද්ධිය හදිසියේම පැමිණියේය. මට ප්රදේශය සීමා කිරීමට අවශ්ය නැත, පරිශීලකයා හැඩය නිවැරදිව මුදා හැරියද නැද්ද යන්න මට දැනගත යුතුය.
නිවැරදි මුදා හැරීම තීරණය කිරීම
මම Android Developers වෙබ් අඩවියේ "drag end events" කොටසෙන් මගේ ප්‍රශ්නවලට පිළිතුරු සොයා ගත්තෙමි. මෙන්න ප්රධාන කරුණු කිහිපයක්:
එබැවින් මට ACTION_DRAG_ENDED සිදුවීමට බාධා කර getResult ක්රමය ඇමතීමට අවශ්‍යයි. එය අසත්‍ය බව ලබා දෙන්නේ නම්, පරිශීලකයා එම කැබැල්ල පුවරුවෙන් ඉවතට ඇද දමා ඇති අතර මට ImageView දෘශ්‍ය ප්‍රකාරයට සැකසීමට අවශ්ය වේ.
@ override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; dragView= (බලන්න) dragEvent බලන්න. getLocalState() ; if (dragAction== DragEvent. ACTION_EDRA) වෙනත් අඩංගු වේ නම් (dragAction== DragEvent. ACTION_EDRA) නම් (dragAction== DragEvent. ACTION_DRAG_ENTERED) (Dragable= true ; ) වෙනත් නම් (dragAction== DragEvent. ACTION_DRAG_ENDED) (නම් (dropEventNotHandled(dragEvent) ) (dragView. setVisibility if) (dragView. setVisibility if) = DragEvent. ACTION_DROP& amp;& amp; Dragable අඩංගු වේ) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(බලන්න. දෘශ්‍යමාන) ; !dragEvent. getResult( ) ;)දැන් පරිශීලකයාට ඕනෑම තැනක රූපය මුදා හැරිය හැකි අතර නරක කිසිවක් සිදු නොවනු ඇත.
වලංගු චලනයන් අර්ථ දැක්වීමලිපියේ අවසාන කොටස කැප කර ඇත්තේ පරිශීලකයා කිරීමට උත්සාහ කරන පියවරේ වලංගුභාවය පරීක්ෂා කිරීම සඳහා ය. මෙම මාතෘකාව විස්තරාත්මකව සාකච්ඡා කිරීමට පෙර, මගේ යෙදුමේ ව්‍යුහය පැහැදිලි කරමින් මම කෙටි සටහනක් තබමි. චෙස් පුවරුව TableLayout එකක් ලෙස නිරූපණය වන අතර, සෑම සෛලයක්ම LinearLayout එකක දරුවෙකු වන අතර OnDragListener එකක් ඇත.
මීට අමතරව, සෑම OnDragListener එකක්ම "මැදිහත්කාර" වස්තුවකට යොමු කරයි, එය ක්‍රීඩා වස්තූන්ගේ අන්තර් ක්‍රියාකාරිත්වය ගැන සැලකිලිමත් වන අතර වත්මන් සෛලයේ පිහිටීම මතක තබා ගනී.
පරිශීලකයා සෛලයක් මත කෑල්ලක් ඇදගෙන යන විට, පහත ක්රියා කළ හැකිය:
පහත දැක්වෙන්නේ විස්තර කරන ලද තර්කනය ක්රියාත්මක කරන කේතයයි
@ override public boolean onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; dragView= (බලන්න) dragEvent බලන්න. getLocalState() ; if (dragAction== DragEvent. ACTION_EDRA) වෙනත් අඩංගු වේ නම් (dragAction== DragEvent. ACTION_EDRA) නම් (dragAction== DragEvent. ACTION_DRAG_ENTERED) (Dragable= true ; ) වෙනත් නම් (dragAction== DragEvent. ACTION_DRAG_ENDED) ( නම් (dropEventNotHandled(dragEvent) ) (dragView. setVisibility if) (dragView. setVisibility if) = DragEvent.ACTION_DROP& amp;& amp; Dragable අඩංගු වේ) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView. setVisibility(Visibility(View. VISIBLE) ; ) සත්‍ය ආපසු ලබා දෙන්න ; )ඔබට පෙනෙන පරිදි, චලනය වලංගුද නැද්ද යන්න නොසලකා, ImageView දෘශ්‍ය තත්ත්වයට මාරු කරනු ලැබේ. මට අවශ්ය වූයේ පරිශීලකයා හැඩය චලනය වන ආකාරය දැකීමටයි. සෛලයක් යනු LayoutView හි දරුවෙකු බව මම කලින් සඳහන් කළෙමි. මෙය සිදු කරනුයේ ImageView සෛලයෙන් කොටුවට ගෙනයාම පහසු කිරීමටය. ImageView චලනය වන ආකාරය පෙන්වන checkForValidMove ක්රමය සඳහා කේතය පහත දැක්වේ.
private void checkForValidMove(ChessBoardSquareLayoutView දැක්ම, dragView බලන්න) ((මැදිහත්කරු. isValidMove(view)) (ViewGroup owner= (ViewGroup) dragView. getParent() ; අයිතිකරු. removeView(dragView. එය (ගුරුත්වාකර්ෂණ මධ්‍යස්ථානය) ; බලන්න. showAsLanded () ; මැදිහත්කරු. handleMove(view) ; ) )ඔබේම ව්යාපෘති සංවර්ධනය කිරීමේදී මෙම ලිපිය ඔබට උපකාර කරනු ඇතැයි මම බලාපොරොත්තු වෙමි.
