ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ತಂತ್ರಜ್ಞಾನದ ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಗಳು ಮತ್ತು ಸಿದ್ಧಾಂತ. Android ನಲ್ಲಿ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ತಂತ್ರಜ್ಞಾನವನ್ನು ಇತರ ಡಿಕ್ಷನರಿಗಳಲ್ಲಿ "ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್" ಏನೆಂದು ನೋಡಿ
182
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಡಿವ್ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ಅದರ ಮೇಲೆ ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ () ವಿಧಾನವನ್ನು ಕರೆಯುವ ಮೂಲಕ ಅದನ್ನು ಚಲಿಸುವಂತೆ ಮಾಡುತ್ತೇವೆ. ಕೆಳಗಿನ ಚಿತ್ರದಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ, ತೆರೆದ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಅಂಶವು ಅದರ ಸಾಮಾನ್ಯ ಸ್ಥಾನವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ, ಆದರೆ ಅದರ ನಂತರ ಅದನ್ನು ಮೌಸ್ ಪಾಯಿಂಟರ್ ಬಳಸಿ ಬ್ರೌಸರ್ ವಿಂಡೋದಲ್ಲಿ ಯಾವುದೇ ಸ್ಥಳಕ್ಕೆ ಸರಿಸಬಹುದು:
ಅಂಶಗಳನ್ನು ಎಳೆಯುವ ಮತ್ತು ಬಿಡುವ ಸಾಮರ್ಥ್ಯವು ತನ್ನದೇ ಆದ ಮೇಲೆ ಉಪಯುಕ್ತವಾಗಿದೆ, ಆದರೆ ಮುಂದೆ ವಿವರಿಸಲಾದ ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯೊಂದಿಗೆ ಬಳಸಿದಾಗ ಅದು ಹೆಚ್ಚು ಉಪಯುಕ್ತವಾಗಿದೆ.
ನಿರ್ದಿಷ್ಟ HTML ಮಾರ್ಕ್ಅಪ್ ಮತ್ತು CSS ಶೈಲಿಗಳ ಬಳಕೆಯ ಮೂಲಕ ಎಳೆಯಬಹುದಾದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಸಾಧಿಸಲಾಗುತ್ತದೆ. ಇದರರ್ಥ ಈ ಕಾರ್ಯವು ಯಾವುದೇ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಆದರೆ ಅದರೊಂದಿಗೆ ಇರುವ ಅಂಶಗಳು ಒಂದೇ ರೀತಿಯ ಸ್ಥಳೀಯ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಪರಿಕರಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಸಾಧ್ಯವಾಗುವುದಿಲ್ಲ ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಂಗಳು.
HTML5 ವಿವರಣೆಯಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರಾಪ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ಥಳೀಯ ಆಪರೇಟಿಂಗ್ ಸಿಸ್ಟಮ್ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ. ನೀವು jQuery UI ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಕಾರ್ಯವಿಧಾನವನ್ನು ಬಳಸುತ್ತಿದ್ದರೆ, ಸಂಘರ್ಷಗಳನ್ನು ತಪ್ಪಿಸಲು ಸಮಾನವಾದ HTML5 ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸುವುದು ಉತ್ತಮ. ಇದನ್ನು ಮಾಡಲು, ಡಾಕ್ಯುಮೆಂಟ್‌ನ ದೇಹದ ಅಂಶದ ಎಳೆಯಬಹುದಾದ ಗುಣಲಕ್ಷಣವನ್ನು ತಪ್ಪು ಎಂದು ಹೊಂದಿಸಿ.
ಎಳೆಯಬಹುದಾದ ಸಂವಾದವನ್ನು ಹೊಂದಿಸಲಾಗುತ್ತಿದೆಎಳೆಯಬಹುದಾದ ಸಂವಾದಗಳಿಗೆ ಹಲವು ಗ್ರಾಹಕೀಕರಣ ಆಯ್ಕೆಗಳಿವೆ. ಕೆಳಗಿನ ವಿಭಾಗಗಳಲ್ಲಿ ಚರ್ಚಿಸಲಾದ ಪ್ರಮುಖ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಕೆಳಗಿನ ಕೋಷ್ಟಕದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ:
| ಅಕ್ಷರೇಖೆ | ಕೆಲವು ದಿಕ್ಕುಗಳಲ್ಲಿ ಚಲಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಮಿತಿಗೊಳಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು ತಪ್ಪಾಗಿದೆ, ಇದರರ್ಥ ಯಾವುದೇ ನಿರ್ಬಂಧವಿಲ್ಲ, ಆದರೆ ನೀವು "x" (X ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಮಾತ್ರ ಚಲಿಸು) ಅಥವಾ "y" (Y ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಮಾತ್ರ ಚಲಿಸು) ಮೌಲ್ಯವನ್ನು ಸಹ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. |
| ಧಾರಣ | ಪರದೆಯ ನಿರ್ದಿಷ್ಟ ಪ್ರದೇಶಕ್ಕೆ ಸರಿಸುವ ಅಂಶದ ಸ್ಥಳವನ್ನು ಮಿತಿಗೊಳಿಸುತ್ತದೆ. ಬೆಂಬಲಿತ ಮೌಲ್ಯಗಳ ಪ್ರಕಾರಗಳನ್ನು ಕೆಳಗಿನ ಕೋಷ್ಟಕದಲ್ಲಿ ವಿವರಿಸಲಾಗಿದೆ, ಅನುಗುಣವಾದ ಉದಾಹರಣೆಯನ್ನು ಬಳಸಿ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು ತಪ್ಪಾಗಿದೆ, ಅಂದರೆ ಯಾವುದೇ ನಿರ್ಬಂಧಗಳಿಲ್ಲ |
| ವಿಳಂಬ | ಒಂದು ಅಂಶವು ಚಲಿಸುವ ಮೊದಲು ಅದನ್ನು ಎಷ್ಟು ಸಮಯದವರೆಗೆ ಎಳೆಯಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು 0 ಆಗಿದೆ, ಅಂದರೆ ವಿಳಂಬವಿಲ್ಲ |
| ದೂರ | ಒಂದು ಅಂಶವನ್ನು ವಾಸ್ತವವಾಗಿ ಚಲಿಸುವ ಮೊದಲು ಅದರ ಆರಂಭಿಕ ಸ್ಥಾನದಿಂದ ಬಳಕೆದಾರರು ಎಳೆಯಬೇಕಾದ ದೂರವನ್ನು ವಿವರಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು 1 ಪಿಕ್ಸೆಲ್ ಆಗಿದೆ |
| ಗ್ರಿಡ್ | ಚಲಿಸಿದ ಅಂಶವನ್ನು ಗ್ರಿಡ್ ಕೋಶಗಳಿಗೆ ಸ್ನ್ಯಾಪಿಂಗ್ ಮಾಡಲು ಒತ್ತಾಯಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು ತಪ್ಪಾಗಿದೆ, ಅಂದರೆ ಬೈಂಡಿಂಗ್ ಇಲ್ಲ |
ಅಂಶದ ಚಲನೆಯನ್ನು ಕೆಲವು ದಿಕ್ಕುಗಳಿಗೆ ನೀವು ನಿರ್ಬಂಧಿಸಲು ಹಲವಾರು ಮಾರ್ಗಗಳಿವೆ. ಮೊದಲನೆಯದು ಅಕ್ಷದ ಆಯ್ಕೆಯನ್ನು ಬಳಸುವುದು, ಇದು ಚಲನೆಯ ದಿಕ್ಕನ್ನು X ಅಥವಾ Y ಅಕ್ಷಕ್ಕೆ ನಿರ್ಬಂಧಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದರ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ತೋರಿಸಲಾಗಿದೆ:
... div.dragElement (ಫಾಂಟ್-ಗಾತ್ರ: ದೊಡ್ಡದು; ಗಡಿ: ತೆಳುವಾದ ಘನ ಕಪ್ಪು; ಪ್ಯಾಡಿಂಗ್: 16px; ಅಗಲ: 8em; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಮಧ್ಯ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಲೈಟ್‌ಗ್ರೇ; ಅಂಚು: 4px ) $(ಫಂಕ್ಷನ್() ( $ (".dragElement").dragable((ಅಕ್ಷ: "x")).filter("#dragV").draggable("option", "axis", "y"); )); ಲಂಬವಾಗಿ ಎಳೆಯಿರಿ ಅಡ್ಡಲಾಗಿ ಎಳೆಯಿರಿ ಉದಾಹರಣೆ ರನ್ ಮಾಡಿ
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಎರಡು ಡಿವಿ ಅಂಶಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ, ಅವುಗಳನ್ನು jQuery ಬಳಸಿ ಆಯ್ಕೆಮಾಡಿ ಮತ್ತು ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ() ವಿಧಾನವನ್ನು ಕರೆಯುತ್ತೇವೆ. ಈ ವಿಧಾನಕ್ಕೆ ಒಂದು ವಾದದಂತೆ, X ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ದಿಕ್ಕಿನಲ್ಲಿ ಎರಡೂ ಡಿವ್ ಅಂಶಗಳ ಚಲನೆಯನ್ನು ನಿರ್ಬಂಧಿಸುವ ವಸ್ತುವನ್ನು ನಾವು ರವಾನಿಸುತ್ತೇವೆ. ನಂತರ jQuery ಫಿಲ್ಟರ್() ವಿಧಾನವನ್ನು ಬಳಸಿಕೊಂಡು, jQuery ಅನ್ನು ಹುಡುಕದೆಯೇ ನಾವು dragV ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಸಂಪೂರ್ಣ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಮತ್ತೊಮ್ಮೆ ಮತ್ತು ಬೇರೆ ಅನುಮತಿಸಲಾದ ಚಲನೆಯ ದಿಕ್ಕಿಗೆ ಹೊಂದಿಸಿ - Y ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ. ಹೀಗಾಗಿ, ನಾವು ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಪಡೆಯುತ್ತೇವೆ, ಇದರಲ್ಲಿ ಒಂದು ಡಿವಿ ಅಂಶವನ್ನು ಲಂಬ ದಿಕ್ಕಿನಲ್ಲಿ ಮಾತ್ರ ಎಳೆಯಬಹುದು ಮತ್ತು ಇನ್ನೊಂದು - ಸಮತಲ ದಿಕ್ಕಿನಲ್ಲಿ ಮಾತ್ರ. ಫಲಿತಾಂಶವನ್ನು ಚಿತ್ರದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ:
ನೀವು ಐಟಂ ಅನ್ನು ಎಳೆಯಬಹುದಾದ ಪರದೆಯ ಪ್ರದೇಶವನ್ನು ಸಹ ನೀವು ಮಿತಿಗೊಳಿಸಬಹುದು. ಇದನ್ನು ಮಾಡಲು, ಕಂಟೈನ್ಮೆಂಟ್ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿ. ಈ ಆಯ್ಕೆಯಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದಾದ ಮೌಲ್ಯ ಸ್ವರೂಪಗಳನ್ನು ಕೆಳಗಿನ ಕೋಷ್ಟಕದಲ್ಲಿ ವಿವರಿಸಲಾಗಿದೆ:
ಕಂಟೈನ್ಮೆಂಟ್ ಆಯ್ಕೆಯನ್ನು ಬಳಸುವ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
... div.dragElement (ಫಾಂಟ್-ಗಾತ್ರ: ದೊಡ್ಡದು; ಗಡಿ: ತೆಳುವಾದ ಘನ ಕಪ್ಪು; ಪ್ಯಾಡಿಂಗ್: 16px; ಅಗಲ: 8em; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಮಧ್ಯ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಲೈಟ್‌ಗ್ರೇ; ಅಂಚು: 4px ) # ಕಂಟೈನರ್ ( ಗಡಿ: ಮಧ್ಯಮ ಡಬಲ್ ಕಪ್ಪು; ಅಗಲ: 700px; ಎತ್ತರ: 450 ಪಿಕ್ಸ್ ಅಕ್ಷ", "x");)); ಅಡ್ಡಲಾಗಿ ಎಳೆಯಿರಿ ಪೋಷಕ ರನ್ ಉದಾಹರಣೆ ಒಳಗೆ ಎಳೆಯಿರಿ
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಎರಡೂ ಅಂಶಗಳು ಚಲಿಸುವ ಸಾಮರ್ಥ್ಯದಲ್ಲಿ ಸೀಮಿತವಾಗಿವೆ ಆದ್ದರಿಂದ ಅವುಗಳನ್ನು ತಮ್ಮ ಮೂಲ ಅಂಶದೊಳಗೆ ಮಾತ್ರ ಎಳೆಯಬಹುದು, ಇದು ಸ್ಥಿರ ಗಾತ್ರದ DIV ಆಗಿದೆ. ತೇಲುತ್ತಿರುವ ಡಿವ್ಸ್‌ಗಳಲ್ಲಿ ಒಂದು ಅಕ್ಷದ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡು ತೇಲುವ ಹೆಚ್ಚುವರಿ ನಿರ್ಬಂಧವನ್ನು ಹೊಂದಿದೆ, ಅದು ಅದರ ಪೋಷಕರೊಳಗೆ ಮಾತ್ರ ಅಡ್ಡಲಾಗಿ ಚಲಿಸುತ್ತದೆ. ಫಲಿತಾಂಶವನ್ನು ಚಿತ್ರದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ:
ಗ್ರಿಡ್ ಆಯ್ಕೆಯು ಗ್ರಿಡ್ ಕೋಶಗಳಿಗೆ ಚಲಿಸಿದ ಅಂಶದ ಬೈಂಡಿಂಗ್ ಅನ್ನು ಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ಆಯ್ಕೆಯು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ಗ್ರಿಡ್ ಕೋಶಗಳ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಸೂಚಿಸುವ ಎರಡು ಅಂಶಗಳ ಒಂದು ಶ್ರೇಣಿಯನ್ನು ಮೌಲ್ಯವಾಗಿ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಗ್ರಿಡ್ ಆಯ್ಕೆಯನ್ನು ಬಳಸುವ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
... #ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ (ಫಾಂಟ್-ಗಾತ್ರ: x-ದೊಡ್ಡದು; ಗಡಿ: ತೆಳುವಾದ ಘನ ಕಪ್ಪು; ಅಗಲ: 5em; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಮಧ್ಯ; ಪ್ಯಾಡಿಂಗ್: 10px) $(ಫಂಕ್ಷನ್() ( $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ"). ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ( (ಗ್ರಿಡ್:));)); ನನ್ನನ್ನು ಎಳೆಯಿರಿ ರನ್ ಉದಾಹರಣೆ
ಈ ಉದಾಹರಣೆಯು 100 ಪಿಕ್ಸೆಲ್‌ಗಳ ಅಗಲ ಮತ್ತು 50 ಪಿಕ್ಸೆಲ್‌ಗಳ ಎತ್ತರದ ಕೋಶಗಳೊಂದಿಗೆ ಗ್ರಿಡ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ನೀವು ಒಂದು ಅಂಶವನ್ನು ಎಳೆದಾಗ, ಅದು ಒಂದು (ಅದೃಶ್ಯ) ಕೋಶದಿಂದ ಇನ್ನೊಂದಕ್ಕೆ "ಜಿಗಿತಗಳು". ಸ್ನ್ಯಾಪಿಂಗ್ ಪರಿಣಾಮವು ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂಬುದಕ್ಕೆ ಉತ್ತಮ ಉದಾಹರಣೆಯಾಗಿದೆ, ಆದರೆ ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ತಿಳಿಸಲು ಕಷ್ಟವಾಗುತ್ತದೆ.
ಮುಕ್ತ ಚಲನೆಯ ಅಕ್ಷವನ್ನು 1 ಗೆ ಹೊಂದಿಸುವ ಮೂಲಕ ನೀವು ಕೇವಲ ಒಂದು ದಿಕ್ಕಿಗೆ ಸ್ನ್ಯಾಪ್ ಪರಿಣಾಮವನ್ನು ರಚಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಗ್ರಿಡ್ ಆಯ್ಕೆಯನ್ನು ಹೊಂದಿಸಿದರೆ, ಅಂಶವು ಅಡ್ಡಲಾಗಿ ಚಲಿಸಿದಾಗ 100 ಪಿಕ್ಸೆಲ್ ಅಗಲದ ಗ್ರಿಡ್ ಕೋಶಗಳಿಗೆ ಸ್ನ್ಯಾಪ್ ಆಗುತ್ತದೆ, ಆದರೆ ಮುಕ್ತವಾಗಿ ಲಂಬವಾಗಿ ಚಲಿಸುತ್ತದೆ.
ಸರಿಸಲು ವಿಳಂಬಚಲಿಸುವ ಅಂಶವನ್ನು ಎಳೆಯುವುದನ್ನು ವಿಳಂಬಗೊಳಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಎರಡು ಆಯ್ಕೆಗಳಿವೆ. ವಿಳಂಬ ಆಯ್ಕೆಯು ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಲ್ಲಿ ಸಮಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಅಂಶವು ನಿಜವಾಗಿ ಚಲಿಸುವ ಮೊದಲು ಬಳಕೆದಾರರು ಮೌಸ್ ಪಾಯಿಂಟರ್ ಅನ್ನು ಎಳೆಯಬೇಕು. ಮತ್ತೊಂದು ರೀತಿಯ ವಿಳಂಬವನ್ನು ದೂರ ಆಯ್ಕೆಯಿಂದ ಒದಗಿಸಲಾಗುತ್ತದೆ, ಇದು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ದೂರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ, ಅದು ಒಂದು ಅಂಶವನ್ನು ಅನುಸರಿಸುವ ಮೊದಲು ಬಳಕೆದಾರರು ಮೌಸ್ ಪಾಯಿಂಟರ್ ಅನ್ನು ಎಳೆಯಬೇಕು.
ಎರಡೂ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಬಳಸುವ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
... #ಸಮಯ, #ದೂರ (ಫಾಂಟ್-ಗಾತ್ರ: ದೊಡ್ಡದು; ಗಡಿ: ತೆಳುವಾದ ಘನ ಕಪ್ಪು; ಪ್ಯಾಡಿಂಗ್: 10px; ಅಗಲ: 120px; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಕೇಂದ್ರ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಲೈಟ್‌ಗ್ರೇ; ಅಂಚು: 4px; ) $(ಕಾರ್ಯ(ಕಾರ್ಯ ) ( $("#ಸಮಯ").ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ(( ವಿಳಂಬ: 1000 )) $("#ದೂರ").ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ((ದೂರ: 150 )) )); ಸಮಯ ವಿಳಂಬದೊಂದಿಗೆ ನಿರ್ಬಂಧಿಸಿ ಕನಿಷ್ಠ ದೂರದ ಓಟದ ಉದಾಹರಣೆಯೊಂದಿಗೆ ನಿರ್ಬಂಧಿಸಿ
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಎರಡು ಚಲಿಸಬಲ್ಲ ಅಂಶಗಳಿವೆ, ಅವುಗಳಲ್ಲಿ ಒಂದು ವಿಳಂಬ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡು ವಿಳಂಬವಾಗುತ್ತದೆ ಮತ್ತು ಇನ್ನೊಂದು ದೂರ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡು ವಿಳಂಬವಾಗುತ್ತದೆ.
ವಿಳಂಬದ ಸಂದರ್ಭದಲ್ಲಿ, ವಿಳಂಬ ಆಯ್ಕೆಯಿಂದ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ, ಅದು ಅಂಶವನ್ನು ನಿಜವಾಗಿ ಚಲಿಸುವ ಮೊದಲು ಬಳಕೆದಾರರು ನಿರ್ದಿಷ್ಟ ಸಮಯದವರೆಗೆ ಎಳೆಯಬೇಕು. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಈ ಅವಧಿಯ ಅವಧಿಯು 1000 ms ಆಗಿದೆ. ಈ ಸಮಯದಲ್ಲಿ ಮೌಸ್ ಅನ್ನು ಸರಿಸಲು ಅಗತ್ಯವಿಲ್ಲ, ಆದರೆ ಸಂಪೂರ್ಣ ವಿಳಂಬದ ಅವಧಿಯಲ್ಲಿ ಮೌಸ್ ಬಟನ್ ಒತ್ತಿದರೆ ಉಳಿಯಬೇಕು, ಅದರ ನಂತರ ಮೌಸ್ ಅನ್ನು ಚಲಿಸುವ ಮೂಲಕ ಅಂಶವನ್ನು ಚಲಿಸಬಹುದು. ವಿಳಂಬ ಸಮಯ ಕಳೆದ ನಂತರ, ಸರಿಸಿದ ಅಂಶವು ಮೌಸ್ ಪಾಯಿಂಟರ್ ಸ್ಥಳಕ್ಕೆ ಸ್ನ್ಯಾಪ್ ಆಗುತ್ತದೆ, ಈ ಹಿಂದೆ ಚರ್ಚಿಸಿದ ಗ್ರಿಡ್, ಪ್ರದೇಶ ಮತ್ತು ಅಕ್ಷದ ಆಯ್ಕೆಗಳಿಂದ ವಿಧಿಸಲಾದ ನಿರ್ಬಂಧಗಳಿಗೆ ಒಳಪಟ್ಟಿರುತ್ತದೆ.
ದೂರದ ಆಯ್ಕೆಯು ಇದೇ ರೀತಿಯ ಪರಿಣಾಮವನ್ನು ಹೊಂದಿದೆ, ಆದರೆ ಈ ಸಂದರ್ಭದಲ್ಲಿ ಬಳಕೆದಾರರು ಮೌಸ್ ಪಾಯಿಂಟರ್ ಅನ್ನು ಕನಿಷ್ಠ ನಿರ್ದಿಷ್ಟ ಸಂಖ್ಯೆಯ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಅಂಶದ ಆರಂಭಿಕ ಸ್ಥಳದಿಂದ ಯಾವುದೇ ದಿಕ್ಕಿನಲ್ಲಿ ಎಳೆಯಬೇಕು. ಸರಿಸಲಾಗುತ್ತಿರುವ ಅಂಶವು ನಂತರ ಪ್ರಸ್ತುತ ಪಾಯಿಂಟರ್ ಸ್ಥಳಕ್ಕೆ ಜಿಗಿಯುತ್ತದೆ.
ನೀವು ಒಂದೇ ಅಂಶಕ್ಕೆ ಎರಡೂ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಿದರೆ, ಎರಡೂ ವಿಳಂಬ ಮಾನದಂಡಗಳನ್ನು ಪೂರೈಸುವವರೆಗೆ ಚಲಿಸಿದ ಅಂಶವು ಚಲಿಸುವುದಿಲ್ಲ, ಅಂದರೆ. ಒಂದು ಅಂಶವನ್ನು ಎಳೆಯುವ ಪ್ರಯತ್ನವು ನಿರ್ದಿಷ್ಟ ಸಮಯದವರೆಗೆ ಇರುತ್ತದೆ ಮತ್ತು ಮೌಸ್ ಪಾಯಿಂಟರ್ ನಿರ್ದಿಷ್ಟ ಸಂಖ್ಯೆಯ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಚಲಿಸುವವರೆಗೆ.
ಎಳೆಯಬಹುದಾದ ಸಂವಹನ ವಿಧಾನಗಳನ್ನು ಬಳಸುವುದುಎಳೆಯಬಹುದಾದ ಸಂವಾದಕ್ಕಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಎಲ್ಲಾ ವಿಧಾನಗಳು ವಿಜೆಟ್‌ಗಳನ್ನು ನೋಡುವಾಗ ನೀವು ಈಗಾಗಲೇ ನೋಡಿದ ಮೂಲ ವಿಧಾನಗಳ ಗುಂಪಿನ ಭಾಗವಾಗಿದೆ. ಎಳೆಯಬಹುದಾದ ಸಂವಹನಕ್ಕೆ ನಿರ್ದಿಷ್ಟವಾದ ಯಾವುದೇ ವಿಧಾನಗಳಿಲ್ಲ, ಆದ್ದರಿಂದ ನಾವು ಅವುಗಳನ್ನು ವಿವರವಾಗಿ ಒಳಗೊಳ್ಳುವುದಿಲ್ಲ. ಲಭ್ಯವಿರುವ ವಿಧಾನಗಳ ಪಟ್ಟಿಯನ್ನು ಕೆಳಗಿನ ಕೋಷ್ಟಕದಲ್ಲಿ ನೀಡಲಾಗಿದೆ:
ಎಳೆಯಬಹುದಾದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯ ಘಟನೆಗಳನ್ನು ಬಳಸುವುದುಒಂದು ಅಂಶವನ್ನು ಎಳೆದಾಗ ನಿಮಗೆ ತಿಳಿಸುವ ಸರಳವಾದ ಈವೆಂಟ್‌ಗಳ ಗುಂಪನ್ನು ಪರಸ್ಪರ ಡ್ರ್ಯಾಗಬಲ್ ಬೆಂಬಲಿಸುತ್ತದೆ. ಈ ಘಟನೆಗಳನ್ನು ಕೆಳಗಿನ ಕೋಷ್ಟಕದಲ್ಲಿ ವಿವರಿಸಲಾಗಿದೆ:
ವಿಜೆಟ್ ಈವೆಂಟ್‌ಗಳಂತೆ, ಈ ಘಟನೆಗಳಿಗೆ ಸಹ ಪ್ರತಿಕ್ರಿಯಿಸಬಹುದು. ಪ್ರಾರಂಭ ಮತ್ತು ನಿಲುಗಡೆ ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
... #ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ (ಫಾಂಟ್-ಗಾತ್ರ: x-ದೊಡ್ಡದು; ಗಡಿ: ತೆಳುವಾದ ಘನ ಕಪ್ಪು; ಅಗಲ: 190px; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಮಧ್ಯ; ಪ್ಯಾಡಿಂಗ್: 10px) $(ಫಂಕ್ಷನ್() ( $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ"). ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ( (ಪ್ರಾರಂಭ: ಕಾರ್ಯ() ( $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").ಪಠ್ಯ("ನನ್ನನ್ನು ಎಳೆಯಿರಿ..."), ನಿಲ್ಲಿಸಿ: ಕಾರ್ಯ() ( $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").text("ನನ್ನನ್ನು ಎಳೆಯಿರಿ") )) ;)); ನನ್ನನ್ನು ಎಳೆಯಿರಿ ರನ್ ಉದಾಹರಣೆ
ಈ ಉದಾಹರಣೆಯು ಎಳೆಯಲ್ಪಟ್ಟಾಗ ಅಂಶದ ಪಠ್ಯ ವಿಷಯವನ್ನು ಬದಲಾಯಿಸಲು ಪ್ರಾರಂಭ ಮತ್ತು ನಿಲ್ಲಿಸುವ ಈವೆಂಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ HTML ಮತ್ತು CSS ಬಳಸಿ ಅಳವಡಿಸಲಾಗಿದೆ ಎಂಬ ಅಂಶದಿಂದಾಗಿ ಈ ಪ್ರಯೋಜನವಾಗಿದೆ: ನೀವು ಪರದೆಯಾದ್ಯಂತ ಚಲಿಸುವಾಗಲೂ ಎಳೆಯಬಹುದಾದ ಅಂಶದ ಸ್ಥಿತಿಯನ್ನು ಬದಲಾಯಿಸಲು jQuery ಅನ್ನು ಬಳಸಬಹುದು.
ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಸಂವಹನವನ್ನು ಬಳಸುವುದುಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಒಂದು ಅಂಶವನ್ನು ಎಳೆಯುವುದು ಸಾಕಾಗಬಹುದು, ಆದರೆ ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯೊಂದಿಗೆ ಬಳಸಿದಾಗ ಇದು ಹೆಚ್ಚು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಅನ್ವಯಿಸಲಾದ ಅಂಶಗಳು (ಮೂಲಕಗಳನ್ನು ಸ್ವೀಕರಿಸುವುದು) ಎಳೆಯಬಹುದಾದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಬಳಸಿಕೊಂಡು ರಚಿಸಲಾದ ಚಲಿಸಬಲ್ಲ ಅಂಶಗಳನ್ನು ಸ್ವೀಕರಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಪಡೆಯುತ್ತವೆ.
ಡ್ರಾಪ್ಪಬಲ್ () ವಿಧಾನವನ್ನು ಬಳಸಿಕೊಂಡು ಸ್ವೀಕರಿಸುವ ಅಂಶಗಳನ್ನು ರಚಿಸಲಾಗಿದೆ, ಆದರೆ ಉಪಯುಕ್ತ ಕಾರ್ಯವನ್ನು ಪಡೆಯಲು ನೀವು ಈ ರೀತಿಯ ಸಂವಹನಕ್ಕಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ರಚಿಸಬೇಕಾಗುತ್ತದೆ. ಲಭ್ಯವಿರುವ ಈವೆಂಟ್‌ಗಳನ್ನು ಕೆಳಗಿನ ಕೋಷ್ಟಕದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ:
| ರಚಿಸಿ | ಒಂದು ಅಂಶಕ್ಕೆ ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಅನ್ವಯಿಸಿದಾಗ ಸಂಭವಿಸುತ್ತದೆ |
| ಸಕ್ರಿಯಗೊಳಿಸಿ | ಬಳಕೆದಾರರು ಚಲಿಸುವ ಅಂಶವನ್ನು ಎಳೆಯಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಸಂಭವಿಸುತ್ತದೆ |
| ನಿಷ್ಕ್ರಿಯಗೊಳಿಸು | ಚಲಿಸುವ ಅಂಶವನ್ನು ಎಳೆಯುವುದನ್ನು ಬಳಕೆದಾರರು ನಿಲ್ಲಿಸಿದಾಗ ಸಂಭವಿಸುತ್ತದೆ |
| ಮುಗಿದಿದೆ | ಬಳಕೆದಾರರು ಸ್ವೀಕರಿಸುವ ಅಂಶದ ಮೇಲೆ ತೇಲುವ ಅಂಶವನ್ನು ಎಳೆದಾಗ ಸಂಭವಿಸುತ್ತದೆ (ಮೌಸ್ ಬಟನ್ ಅನ್ನು ಇನ್ನೂ ಬಿಡುಗಡೆ ಮಾಡಲಾಗಿಲ್ಲ) |
| ಹೊರಗೆ | ಸ್ವೀಕರಿಸುವ ಅಂಶದ ಹೊರಗೆ ಚಲಿಸುವ ಅಂಶವನ್ನು ಬಳಕೆದಾರರು ಎಳೆದಾಗ ಸಂಭವಿಸುತ್ತದೆ |
| ಬಿಡಿ | ಸ್ವೀಕರಿಸುವ ಅಂಶದ ಮೇಲೆ ಚಲಿಸುವ ಅಂಶವನ್ನು ಬಳಕೆದಾರರು ತೊರೆದಾಗ ಸಂಭವಿಸುತ್ತದೆ |
ಸಿಂಗಲ್ ಡ್ರಾಪ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಸರಳ ಸ್ವೀಕರಿಸುವ ಅಂಶವನ್ನು ರಚಿಸುವ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
... #ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ, #ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ (ಫಾಂಟ್-ಗಾತ್ರ: ದೊಡ್ಡದು; ಗಡಿ: ತೆಳುವಾದ ಘನ ಕಪ್ಪು; ಪ್ಯಾಡಿಂಗ್: 10px; ಅಗಲ: 100px; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಮಧ್ಯ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಲೈಟ್‌ಗ್ರೇ; ಅಂಚು: 4px;) #ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ (ಪ್ಯಾಡಿಂಗ್ : 20px; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಬಲ: 5px;) $(ಫಂಕ್ಷನ್() ( $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ(); $("#ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ").ಡ್ರಾಪ್ಪಬಲ್(( ಡ್ರಾಪ್: ಫಂಕ್ಷನ್() ( $(" #ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").ಪಠ್ಯ("ಎಡ") ) ));)); ನನ್ನನ್ನು ಇಲ್ಲಿಗೆ ಬಿಡಿ ನನ್ನನ್ನು ಎಳೆಯಿರಿ ರನ್ ಉದಾಹರಣೆ
ಈ ಉದಾಹರಣೆಯು "ಇಲ್ಲಿ ಬಿಡಿ" ಎಂಬ ಸ್ಟ್ರಿಂಗ್‌ನಿಂದ ಪಠ್ಯ ವಿಷಯವನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಡಾಕ್ಯುಮೆಂಟ್‌ಗೆ ಡಿವ್ ಅಂಶವನ್ನು ಸೇರಿಸುತ್ತದೆ. ನಾವು jQuery ಅನ್ನು ಬಳಸಿಕೊಂಡು ಈ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ಡ್ರಾಪ್ಪಬಲ್ () ವಿಧಾನವನ್ನು ಕರೆಯುತ್ತೇವೆ, ಡ್ರಾಪ್ ಈವೆಂಟ್‌ಗಾಗಿ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ವಸ್ತುವನ್ನು ರವಾನಿಸುತ್ತೇವೆ. ಪಠ್ಯ() ವಿಧಾನವನ್ನು ಬಳಸಿಕೊಂಡು ಚಲಿಸುವ ಅಂಶದ ಪಠ್ಯವನ್ನು ಬದಲಾಯಿಸುವುದು ಈ ಘಟನೆಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿದೆ.
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ರಚಿಸಲಾದ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಪರಸ್ಪರ ಕ್ರಿಯೆಯು ಸರಳವಾಗಿದೆ, ಆದರೆ ಇದು ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ ಮತ್ತು ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಸಂವಾದಗಳು ಹೇಗೆ ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ವಿವರಿಸಲು ಉಪಯುಕ್ತ ಸಂದರ್ಭವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಅಂಶಗಳನ್ನು ಎಳೆಯುವ ಪ್ರಕ್ರಿಯೆಯ ವಿವಿಧ ಹಂತಗಳನ್ನು ಚಿತ್ರದಲ್ಲಿ ವಿವರಿಸಲಾಗಿದೆ:
ಇದೆಲ್ಲವೂ ತುಂಬಾ ಸರಳವಾಗಿ ಕಾಣುತ್ತದೆ. ಸ್ವೀಕರಿಸುವ ಅಂಶಕ್ಕಿಂತ ಮೇಲಿರುವವರೆಗೆ ನಾವು ಚಲಿಸುವ ಅಂಶವನ್ನು ಎಳೆಯುತ್ತೇವೆ ಮತ್ತು ಅದನ್ನು ಬಿಡುಗಡೆ ಮಾಡುತ್ತೇವೆ. ಕೈಬಿಡಲಾದ ಅಂಶವು ಎಲ್ಲಿ ಉಳಿದಿದೆಯೋ ಅಲ್ಲಿಯೇ ಉಳಿಯುತ್ತದೆ ಮತ್ತು ಡ್ರಾಪ್ ಈವೆಂಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಅದರ ಪಠ್ಯ ವಿಷಯವು ಬದಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಇತರ ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯ ಘಟನೆಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಕೆಳಗಿನ ವಿಭಾಗಗಳು ತೋರಿಸುತ್ತವೆ.
ಗುರಿ ಸ್ವೀಕರಿಸುವ ವಸ್ತುವಿನ ಪ್ರಕಾಶಈವೆಂಟ್ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ ಮತ್ತು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ, ಬಳಕೆದಾರರು ಅಂಶವನ್ನು ಎಳೆಯುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸಿದಾಗ ಗುರಿ ಸ್ವೀಕರಿಸುವ ವಸ್ತುವನ್ನು ನೀವು ಹೈಲೈಟ್ ಮಾಡಬಹುದು. ಅನೇಕ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಈ ಕಲ್ಪನೆಯು ಬಹಳ ಫಲಪ್ರದವಾಗಿದೆ ಏಕೆಂದರೆ ಇದು ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರಾಪ್ ಮಾದರಿಯ ಭಾಗವಾಗಿರುವ ಅಂಶಗಳ ಬಗ್ಗೆ ವಿಶ್ವಾಸಾರ್ಹ ಮಾರ್ಗದರ್ಶನವನ್ನು ಬಳಕೆದಾರರಿಗೆ ಒದಗಿಸುತ್ತದೆ. ಅನುಗುಣವಾದ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
... $(ಫಂಕ್ಷನ್() ( $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ(); $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").ಡ್ರಾಪ್ಪಬಲ್(( ಡ್ರಾಪ್: ಫಂಕ್ಷನ್() ( $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").ಪಠ್ಯ("ಎಡ ಸಕ್ರಿಯಗೊಳಿಸು ").css("ಗಡಿ", "").css("ಹಿನ್ನೆಲೆ-ಬಣ್ಣ", ""); ) );)); ...ರನ್ ಉದಾಹರಣೆ
ಬಳಕೆದಾರರು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಎಳೆಯಲು ಪ್ರಾರಂಭಿಸಿದ ತಕ್ಷಣ, ನಮ್ಮ ಸ್ವೀಕರಿಸುವ ಅಂಶದೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ ಸಕ್ರಿಯಗೊಳಿಸುವ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ ಮತ್ತು ಆ ಅಂಶದ ಗಡಿ ಮತ್ತು ಹಿನ್ನೆಲೆ-ಬಣ್ಣದ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸಲು ಹ್ಯಾಂಡ್ಲರ್ ಕಾರ್ಯವು css() ವಿಧಾನವನ್ನು ಬಳಸುತ್ತದೆ. ಪರಿಣಾಮವಾಗಿ, ಗುರಿ ಸ್ವೀಕರಿಸುವ ಅಂಶವನ್ನು ಹೈಲೈಟ್ ಮಾಡಲಾಗುತ್ತದೆ, ಇದು ಬಳಕೆದಾರರಿಗೆ ಮತ್ತು ಚಲಿಸುವ ಅಂಶದ ನಡುವೆ ಸಂಪರ್ಕವಿದೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ.
ಸ್ವೀಕರಿಸುವ ಅಂಶದಿಂದ CSS ಆಸ್ತಿ ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಹಾಕಲು ಮತ್ತು ಅದನ್ನು ಹಿಂತಿರುಗಿಸಲು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಈವೆಂಟ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ ಆರಂಭಿಕ ಸ್ಥಿತಿ, ಬಳಕೆದಾರರು ಮೌಸ್ ಬಟನ್ ಅನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿದ ತಕ್ಷಣ. (ಒಂದು ಅಂಶವನ್ನು ಎಳೆಯುವುದು ನಿಂತಾಗ ಈ ಘಟನೆಯು ಸಂಭವಿಸುತ್ತದೆ, ಎಳೆಯಲ್ಪಡುವ ಅಂಶವು ಸ್ವೀಕರಿಸುವ ಅಂಶದ ಮೇಲೆ ಉಳಿದಿದೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ.) ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಚಿತ್ರದಲ್ಲಿ ವಿವರಿಸಲಾಗಿದೆ:
ಈವೆಂಟ್ ನಿರ್ವಹಣೆಯನ್ನು ಓವರ್ ಮತ್ತು ಔಟ್ ಸೇರಿಸುವ ಮೂಲಕ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ತಂತ್ರಜ್ಞಾನವನ್ನು ಸುಧಾರಿಸಬಹುದು. ಚಲಿಸುವ ಅಂಶದ 50% ಸ್ವೀಕರಿಸುವ ಅಂಶದ ಯಾವುದೇ ಭಾಗದ ಮೇಲೆ ಇರುವಾಗ ಓವರ್ ಈವೆಂಟ್ ಸಂಭವಿಸುತ್ತದೆ. ಹಿಂದೆ ಅತಿಕ್ರಮಿಸುವ ಅಂಶಗಳು ಇನ್ನು ಮುಂದೆ ಅತಿಕ್ರಮಿಸಿದಾಗ ಔಟ್ ಈವೆಂಟ್ ಸಂಭವಿಸುತ್ತದೆ. ಈ ಘಟನೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
$(ಫಂಕ್ಷನ್() ( $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ(); $("#ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ").ಡ್ರಾಪ್ಪಬಲ್(( ಡ್ರಾಪ್: ಫಂಕ್ಷನ್() ( $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").ಪಠ್ಯ("ಎಡ") ) , ಸಕ್ರಿಯಗೊಳಿಸಿ: ಕಾರ್ಯ() ( $("#ಡ್ರಾಪ್ಪಬಲ್").css(( ಗಡಿ: "ಮಧ್ಯಮ ಡಬಲ್ ಹಸಿರು", ಹಿನ್ನೆಲೆ ಬಣ್ಣ: "ಲೈಟ್ಗ್ರೀನ್" )); ), ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ: ಕಾರ್ಯ() ( $("#ಡ್ರಾಪ್ಪಬಲ್"). css("ಗಡಿ", "").css("ಹಿನ್ನೆಲೆ-ಬಣ್ಣ", ""); ), ಓವರ್: ಫಂಕ್ಷನ್() ( $("#ಡ್ರಾಪ್ಪಬಲ್").css(( ಗಡಿ: "ಮಧ್ಯಮ ಡಬಲ್ ರೆಡ್", ಹಿನ್ನೆಲೆ ಬಣ್ಣ : "ಕೆಂಪು"); ); ಉದಾಹರಣೆ ರನ್ ಮಾಡಿ
ಹಿಂದಿನ ಉದಾಹರಣೆಯಲ್ಲಿರುವಂತೆ ಅದೇ ಹ್ಯಾಂಡ್ಲರ್ ಕಾರ್ಯಗಳನ್ನು ಇಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ಈ ಸಂದರ್ಭದಲ್ಲಿ ಅವುಗಳು ಓವರ್ ಮತ್ತು ಔಟ್ ಈವೆಂಟ್‌ಗಳೊಂದಿಗೆ ಸಂಬಂಧ ಹೊಂದಿವೆ. ಸ್ವೀಕರಿಸುವ ಅಂಶವು ಚಲಿಸಿದ ಅಂಶದ ಕನಿಷ್ಠ 50% ಅನ್ನು ಅತಿಕ್ರಮಿಸಿದಾಗ, ಅದನ್ನು ಚೌಕಟ್ಟಿನಲ್ಲಿ ಸುತ್ತುವರಿಯಲಾಗುತ್ತದೆ ಮತ್ತು ಚಿತ್ರದಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ ಅದರ ಹಿನ್ನೆಲೆ ಬಣ್ಣ ಬದಲಾಗುತ್ತದೆ:
ಈ 50% ಮಿತಿಯನ್ನು ಅತಿಕ್ರಮಣ ಮಿತಿ (ಸಹಿಷ್ಣುತೆ) ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ, ಸ್ವೀಕರಿಸುವ ಅಂಶವನ್ನು ರಚಿಸುವಾಗ ಅದರ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸಬಹುದು, ನಂತರ ತೋರಿಸಲಾಗುತ್ತದೆ.
ಡ್ರಾಪ್ಪಬಲ್ ಸಂವಹನವನ್ನು ಹೊಂದಿಸಲಾಗುತ್ತಿದೆಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಸಂವಹನವು ಹಲವಾರು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿದೆ, ಅದರ ನಡವಳಿಕೆಯನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನೀವು ಬದಲಾಯಿಸಬಹುದು. ಈ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಕೆಳಗಿನ ಕೋಷ್ಟಕದಲ್ಲಿ ಪಟ್ಟಿ ಮಾಡಲಾಗಿದೆ:
| ಅಂಗವಿಕಲ | ಈ ಆಯ್ಕೆಯು ನಿಜವಾಗಿದ್ದರೆ, ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಆರಂಭದಲ್ಲಿ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು ತಪ್ಪಾಗಿದೆ |
| ಒಪ್ಪಿಕೊಳ್ಳಿ | ಸ್ವೀಕರಿಸುವ ಅಂಶವು ಪ್ರತಿಕ್ರಿಯಿಸುವ ಚಲಿಸಬಲ್ಲ ಅಂಶಗಳ ಗುಂಪನ್ನು ಕಿರಿದಾಗಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು *, ಇದು ಯಾವುದೇ ಅಂಶಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ |
| ಸಕ್ರಿಯ ವರ್ಗ | ಸಕ್ರಿಯಗೊಳಿಸುವ ಈವೆಂಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ನಿಯೋಜಿಸಲಾದ ಮತ್ತು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಈವೆಂಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ತೆಗೆದುಹಾಕಲಾದ ವರ್ಗವನ್ನು ವಿವರಿಸುತ್ತದೆ |
| ಹೋವರ್ಕ್ಲಾಸ್ | ಓವರ್ ಈವೆಂಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ನಿಯೋಜಿಸಲಾದ ಮತ್ತು ಔಟ್ ಈವೆಂಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ತೆಗೆದುಹಾಕಲಾಗುವ ವರ್ಗವನ್ನು ವಿವರಿಸುತ್ತದೆ |
| ಸಹಿಷ್ಣುತೆ | ಓವರ್ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಅತಿಕ್ರಮಣದ ಕನಿಷ್ಠ ಪದವಿಯನ್ನು ವಿವರಿಸುತ್ತದೆ |
ಸ್ವೀಕರಿಸುವ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಇಂಟರ್‌ಆಪರೇಬಿಲಿಟಿ ಕಾರ್ಯವನ್ನು ಹೊಂದಿರುವ ಅಂಶದಿಂದ ಸ್ವೀಕರಿಸಲಾಗುವ ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಅಂಶಗಳ ಗುಂಪನ್ನು ನೀವು ಮಿತಿಗೊಳಿಸಬಹುದು. ಸ್ವೀಕರಿಸುವ ಆಯ್ಕೆಯ ಮೌಲ್ಯವನ್ನು ಸೆಲೆಕ್ಟರ್‌ಗೆ ಹೊಂದಿಸಬೇಕು. ಪರಿಣಾಮವಾಗಿ, ಸರಿಸಲಾದ ಅಂಶವು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಸೆಲೆಕ್ಟರ್‌ಗೆ ಹೊಂದಿಕೆಯಾದರೆ ಮಾತ್ರ ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಸಂವಹನ ಘಟನೆಗಳು ಸಂಭವಿಸುತ್ತವೆ. ಅನುಗುಣವಾದ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
... .ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ, #ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ (ಫಾಂಟ್-ಗಾತ್ರ: ದೊಡ್ಡದು; ಗಡಿ: ತೆಳುವಾದ ಘನ ಕಪ್ಪು; ಪ್ಯಾಡಿಂಗ್: 10px; ಅಗಲ: 100px; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಮಧ್ಯ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಲೈಟ್‌ಗ್ರೇ; ಅಂಚು: 4px;) #ಡ್ರಾಪ್ಪಬಲ್ (ಪ್ಯಾಡಿಂಗ್ : 20px; ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಬಲ: 5px;) $(ಫಂಕ್ಷನ್() ( $(".ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").dragable(); $("#dropable").dropable(( ಡ್ರಾಪ್: ಫಂಕ್ಷನ್(ಈವೆಂಟ್, ui) ( ui.draggable.text("ಎಡ") ), ಸಕ್ರಿಯಗೊಳಿಸಿ: ಕಾರ್ಯ() ($("#ಡ್ರಾಪ್ಪಬಲ್").css(( ಗಡಿ: "ಮಧ್ಯಮ ಡಬಲ್ ಹಸಿರು", ಹಿನ್ನೆಲೆ ಬಣ್ಣ: "ಲೈಟ್ಗ್ರೀನ್" )); ), ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ: ಕಾರ್ಯ () ($("#ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ").css("ಗಡಿ", "").css("ಹಿನ್ನೆಲೆ-ಬಣ್ಣ", ""); ), ಸ್ವೀಕರಿಸಿ: "#drag1" ));)); ಇಲ್ಲಿ ಬಿಡಿ ಎಲಿಮೆಂಟ್ 1 ಎಲಿಮೆಂಟ್ 2 ರನ್ ಉದಾಹರಣೆ
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಡ್ರ್ಯಾಗ್1 ಮತ್ತು ಡ್ರ್ಯಾಗ್2 ಐಡಿಗಳೊಂದಿಗೆ ಎರಡು ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ ಅಂಶಗಳಿವೆ. ಸ್ವೀಕರಿಸುವ ಅಂಶವನ್ನು ರಚಿಸುವಾಗ, ನಾವು ಸ್ವೀಕರಿಸುವ ಆಯ್ಕೆಯನ್ನು ಬಳಸುತ್ತೇವೆ, ಅದರೊಂದಿಗೆ drag1 ಅಂಶವು ಮಾತ್ರ ಸರಿಸಲು ಸ್ವೀಕಾರಾರ್ಹ ಅಂಶವಾಗಿದೆ ಎಂದು ನಾವು ಸೂಚಿಸುತ್ತೇವೆ.
ನೀವು drag1 ಅಂಶವನ್ನು ಎಳೆದಾಗ, ಹಿಂದಿನ ಉದಾಹರಣೆಗಳಂತೆಯೇ ನೀವು ಅದೇ ಪರಿಣಾಮವನ್ನು ನೋಡುತ್ತೀರಿ. ಸೂಕ್ತ ಸಮಯದಲ್ಲಿ, ಸ್ವೀಕರಿಸುವ ಅಂಶಕ್ಕಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸಿ, ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ, ಓವರ್ ಮತ್ತು ಔಟ್ ಈವೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ. ಅದೇ ಸಮಯದಲ್ಲಿ, ಸ್ವೀಕರಿಸುವ ಪ್ಯಾರಾಮೀಟರ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಆಯ್ಕೆಗೆ ಹೊಂದಿಕೆಯಾಗದ ಡ್ರ್ಯಾಗ್2 ಅಂಶವನ್ನು ನೀವು ಎಳೆದರೆ, ನಂತರ ಈ ಈವೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕಲಾಗುವುದಿಲ್ಲ. ಈ ಅಂಶವನ್ನು ಮುಕ್ತವಾಗಿ ಚಲಿಸಬಹುದು, ಆದರೆ ಸ್ವೀಕರಿಸುವ ಅಂಶದಿಂದ ಅದನ್ನು ಗ್ರಹಿಸಲಾಗುವುದಿಲ್ಲ.
ಪಠ್ಯ() ವಿಧಾನವನ್ನು ಕರೆಯಲು ನಾವು ಸ್ವೀಕಾರಾರ್ಹ ತೇಲುವ ಅಂಶವನ್ನು ಹೇಗೆ ಆಯ್ಕೆ ಮಾಡುತ್ತೇವೆ ಎಂಬುದರ ಬದಲಾವಣೆಯನ್ನು ಗಮನಿಸಿ. ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಕೇವಲ ಒಂದು ಚಲಿಸುವ ಅಂಶ ಇದ್ದಾಗ, ಐಡಿ ಗುಣಲಕ್ಷಣವು ಇದಕ್ಕೆ ಸಾಕಾಗಿತ್ತು:
ಡ್ರಾಪ್: ಫಂಕ್ಷನ್() ( $("#ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ").ಪಠ್ಯ("ಎಡ") ),
ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಎರಡು ತೇಲುವ ಅಂಶಗಳಿವೆ, ಮತ್ತು ಐಡಿ ಗುಣಲಕ್ಷಣದ ಮೂಲಕ ಆಯ್ಕೆ ಮಾಡುವುದರಿಂದ ಅಪೇಕ್ಷಿತ ಫಲಿತಾಂಶವನ್ನು ನೀಡುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಈ ಸಂದರ್ಭದಲ್ಲಿ ಪಠ್ಯವು ಯಾವಾಗಲೂ ಅದೇ ಫ್ಲೋಟಬಲ್ ಅಂಶದಲ್ಲಿ ಬದಲಾಗುತ್ತದೆ, ಸ್ವೀಕರಿಸುವ ಅಂಶಕ್ಕೆ ಯಾವುದು ಸ್ವೀಕಾರಾರ್ಹವಾಗಿದೆ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ.
ಪ್ರತಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗೆ ಹೆಚ್ಚುವರಿ ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ jQuery UI ಒದಗಿಸುವ ui ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಬಳಸುವುದು ಪರಿಹಾರವಾಗಿದೆ. ui ಆಬ್ಜೆಕ್ಟ್‌ನ ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದ ಆಸ್ತಿಯು ಬಳಕೆದಾರರು ಎಳೆಯುವ ಅಥವಾ ಗುರಿಯ ಅಂಶದ ಮೇಲೆ ಬಿಡಲು ಪ್ರಯತ್ನಿಸುವ ಅಂಶವನ್ನು ಹೊಂದಿರುವ jQuery ವಸ್ತುವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ, ಬಯಸಿದ ಅಂಶವನ್ನು ಈ ರೀತಿ ಆಯ್ಕೆ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ:
ಡ್ರಾಪ್: ಕಾರ್ಯ(ಈವೆಂಟ್, ಯುಐ) (ui.draggable.text("ಎಡ") ),
ಅತಿಕ್ರಮಣ ಮಿತಿಯನ್ನು ಬದಲಾಯಿಸುವುದುಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಸರಿಸಲಾದ ಅಂಶದ ಕನಿಷ್ಠ 50% ಸ್ವೀಕರಿಸುವ ಅಂಶವನ್ನು ಅತಿಕ್ರಮಿಸಿದಾಗ ಮಾತ್ರ ಓವರ್ ಈವೆಂಟ್ ಸಂಭವಿಸುತ್ತದೆ. ಈ ಮಿತಿ ಅತಿಕ್ರಮಣದ ಪ್ರಮಾಣವನ್ನು ಸಹಿಷ್ಣುತೆ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಬದಲಾಯಿಸಬಹುದು, ಇದು ಕೆಳಗಿನ ಕೋಷ್ಟಕದಲ್ಲಿ ತೋರಿಸಿರುವ ಮೌಲ್ಯಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಬಹುದು:
ನಾನು ಹೆಚ್ಚಾಗಿ ಬಳಸುವ ಎರಡು ಮೌಲ್ಯಗಳು ಸರಿಹೊಂದುತ್ತವೆ ಮತ್ತು ಸ್ಪರ್ಶಿಸುತ್ತವೆ ಏಕೆಂದರೆ ಅವುಗಳು ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ಅರ್ಥವನ್ನು ನೀಡುತ್ತವೆ. ಎಳೆದ ಅಂಶವು ಅದನ್ನು ಸರಿಸಿದ ಸ್ವೀಕರಿಸುವ ಅಂಶದ ಪ್ರದೇಶದಲ್ಲಿ ಉಳಿಯಬೇಕಾದಾಗ ನಾನು ಫಿಟ್ ಅನ್ನು ಬಳಸುತ್ತೇನೆ ಮತ್ತು ಎಳೆದ ಅಂಶವು ಅದರ ಮೂಲ ಸ್ಥಾನಕ್ಕೆ ಮರಳಬೇಕಾದಾಗ ಸ್ಪರ್ಶಿಸುತ್ತೇನೆ (ಉದಾಹರಣೆಗೆ ಕೆಳಗೆ ನೀಡಲಾಗುವುದು). ಫಿಟ್ ಮತ್ತು ಟಚ್ ನಿಯತಾಂಕಗಳನ್ನು ಬಳಸುವ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
ಕ್ಲೋನ್ ಮೌಲ್ಯವು jQuery UI ಗೆ ಚಲಿಸುವ ಅಂಶದ ನಕಲನ್ನು ಅದರ ಎಲ್ಲಾ ವಿಷಯಗಳೊಂದಿಗೆ ರಚಿಸಲು ಹೇಳುತ್ತದೆ ಮತ್ತು ಪರಿಣಾಮವಾಗಿ ಫಲಿತಾಂಶವನ್ನು ಸಹಾಯಕ ಅಂಶವಾಗಿ ಬಳಸುತ್ತದೆ. ಫಲಿತಾಂಶವನ್ನು ಚಿತ್ರದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ:
ಸರಿಸಿದ ಅಂಶದ ಮೇಲೆ ಬಳಕೆದಾರರು ಮೌಸ್ ಬಟನ್ ಅನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿದಾಗ ಸಹಾಯಕ ಅಂಶವನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ, ಅಂಶವನ್ನು ಸರಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಸ್ವೀಕರಿಸುವ ಅಂಶವನ್ನು ಅವುಗಳ ಮೂಲ ಸ್ಥಾನಗಳಲ್ಲಿ ಬಿಡಲಾಗುತ್ತದೆ.
ಚಿತ್ರದಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ, ಸರಿಸಿದ ಮೂಲ ಅಂಶವು ಸ್ಥಳದಲ್ಲಿಯೇ ಉಳಿದಿದೆ ಮತ್ತು ಸಹಾಯಕ ಅಂಶವು ಮಾತ್ರ ಮೌಸ್ ಪಾಯಿಂಟರ್ ಅನ್ನು ಅನುಸರಿಸಿ ಪರದೆಯ ಸುತ್ತಲೂ ಚಲಿಸುತ್ತದೆ. ಸರಿಸಿದ ಅಂಶದ ಗಾತ್ರವು ದೊಡ್ಡದಾಗಿದ್ದರೆ, ನಮ್ಮ ಉದಾಹರಣೆಯಲ್ಲಿರುವಂತೆ, ಅದು ಉಳಿದ ಡಾಕ್ಯುಮೆಂಟ್ ಅಂಶಗಳನ್ನು ಒಳಗೊಳ್ಳುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಸ್ವೀಕರಿಸುವ ಅಂಶದ ಸ್ಥಾನವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಬಳಕೆದಾರರಿಗೆ ಕಷ್ಟವಾಗುತ್ತದೆ. ಕೆಳಗಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ, ಸಹಾಯಕ ಆಯ್ಕೆಯ ಮೌಲ್ಯದಂತೆ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಈ ಸಮಸ್ಯೆಯನ್ನು ನಿಭಾಯಿಸಬಹುದು:
... $(ಫಂಕ್ಷನ್() ( $("div.dragable")..png"/>") )); $("#basket").droppable((activeClass: "active", hoverClass: "hover" )); )); ...ರನ್ ಉದಾಹರಣೆ
ಬಳಕೆದಾರರು ಒಂದು ಅಂಶವನ್ನು ಎಳೆಯಲು ಪ್ರಾರಂಭಿಸಿದಾಗ, jQuery UI ಸಹಾಯಕ ಪ್ಯಾರಾಮೀಟರ್‌ನಿಂದ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಕಾರ್ಯವನ್ನು ಕರೆಯುತ್ತದೆ ಮತ್ತು ಹಿಂತಿರುಗಿದ ಅಂಶವನ್ನು ಎಳೆಯಬೇಕಾದ ವಸ್ತುವಾಗಿ ಬಳಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, img ಅಂಶವನ್ನು ರಚಿಸಲು ನಾನು jQuery ಅನ್ನು ಬಳಸುತ್ತಿದ್ದೇನೆ. ಫಲಿತಾಂಶವನ್ನು ಚಿತ್ರದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ:
ಒಂದು ಸಣ್ಣ ಚಿತ್ರವು ಸರಿಸಿದ ಅಂಶಕ್ಕೆ ಪ್ರಾಕ್ಸಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿನ ಇತರ ಅಂಶಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಹೆಚ್ಚು ಸುಲಭವಾಗುತ್ತದೆ.
ಡ್ರಾಪ್ ಮಾಡಬಹುದಾದ ಸಂವಾದದ ಈವೆಂಟ್‌ಗಳಿಗೆ jQuery UI ಹಾದುಹೋಗುವ ui ಆಬ್ಜೆಕ್ಟ್ ಸಹಾಯಕ ಆಸ್ತಿಯನ್ನು ಹೊಂದಿದೆ, ಮತ್ತು ಈ ಆಸ್ತಿಯನ್ನು ಡ್ರ್ಯಾಗ್ ಮಾಡುತ್ತಿರುವಾಗ ಸಹಾಯಕವನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ಬಳಸಬಹುದು. ಓವರ್ ಮತ್ತು ಔಟ್ ಈವೆಂಟ್‌ಗಳ ಜೊತೆಯಲ್ಲಿ ಈ ಆಸ್ತಿಯನ್ನು ಬಳಸುವ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
... $(ಫಂಕ್ಷನ್() ( $("div.dragable")..png"/>") )); $("#basket").dropable((activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("ಗಡಿ", "ದಪ್ಪ ಘನ #27e6ed") ) , ಔಟ್: ಫಂಕ್ಷನ್(ಈವೆಂಟ್, ಯುಐ) (ui.helper.css("ಗಡಿ", "") ) ); )); ...
ಇಲ್ಲಿ ಓವರ್ ಮತ್ತು ಔಟ್ ಈವೆಂಟ್‌ಗಳು ಮತ್ತು ui.helper ಆಸ್ತಿಯನ್ನು ಸ್ವೀಕರಿಸುವ ಅಂಶವನ್ನು ಅತಿಕ್ರಮಿಸಿದಾಗ ಸಹಾಯಕ ಅಂಶದ ಸುತ್ತಲೂ ಗಡಿಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಫಲಿತಾಂಶವನ್ನು ಚಿತ್ರದಲ್ಲಿ ತೋರಿಸಲಾಗಿದೆ:
ಸ್ನ್ಯಾಪ್ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿಕೊಂಡು, ಚಲಿಸಿದ ಅಂಶವು ಅದು ಹಾದುಹೋಗುವ ಮುಂದಿನ ಅಂಶಗಳ ಅಂಚುಗಳಿಗೆ "ಆಕರ್ಷಿತವಾಗಿದೆ" ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಈ ಆಯ್ಕೆಯು ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಮೌಲ್ಯವಾಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ. ಸರಿಸಿದ ಅಂಶವು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಸೆಲೆಕ್ಟರ್‌ಗೆ ಹೊಂದಿಕೆಯಾಗುವ ಯಾವುದೇ ಅಂಶದ ಅಂಚುಗಳಿಗೆ ಸ್ನ್ಯಾಪ್ ಆಗುತ್ತದೆ. ಸ್ನ್ಯಾಪ್ ಆಯ್ಕೆಯನ್ನು ಬಳಸುವ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ:
jQuery UI ಅನ್ನು ರನ್ ಮಾಡಿ ಉದಾಹರಣೆ #snapper, .dragable, .droppable (ಫಾಂಟ್-ಗಾತ್ರ: ದೊಡ್ಡದು; ಗಡಿ: ಮಧ್ಯಮ ಘನ ಕಪ್ಪು; ಪ್ಯಾಡಿಂಗ್: 4px; ಅಗಲ: 150px; ಪಠ್ಯ-ಹೊಂದಾಣಿಕೆ: ಮಧ್ಯ; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಲೈಟ್‌ಗ್ರೇ; ಅಂಚು-ಕೆಳಗೆ: 10px ;).ಬಿಡಬಹುದಾದ (ಅಂಚು-ಬಲ: 5px; ಎತ್ತರ: 50px; ಅಗಲ: 120px) #dropContainer (ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಬಲ: 5px;) ಡಿವ್ ಸ್ಪ್ಯಾನ್ (ಸ್ಥಾನ: ಸಂಬಂಧಿ; ಮೇಲ್ಭಾಗ: 25%) .droppable.active (ಗಡಿ: ಮಧ್ಯಮ ಘನ ಹಸಿರು) .droppable.hover (ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಲೈಟ್ಗ್ರೀನ್) #ಸ್ನ್ಯಾಪರ್ (ಸ್ಥಾನ: ಸಂಪೂರ್ಣ; ಎಡ: 35%; ಗಡಿ: ಮಧ್ಯಮ ಘನ ಕಪ್ಪು; ಅಗಲ: 180px; ಎತ್ತರ: 50px) $(ಕಾರ್ಯ() ( $(" div.draggable").dragable(( snap: "#snapper, .dropable", snapMode: "ಎರಡೂ", snapTolerance: 50 )); $("#basket").dropable((activeClass: "active", hoverClass: "ಹಾರಾಡುತ್ತಿರು" )); )); ಕಾರ್ಟ್ ಸ್ನ್ಯಾಪ್ ಇಲ್ಲಿ ನನ್ನನ್ನು ಎಳೆಯಿರಿ
ಚಲಿಸುವ ಅಂಶವು ಸೂಕ್ತವಾದ ಅಂಶಗಳಲ್ಲಿ ಒಂದನ್ನು ಸಮೀಪಿಸಿದಾಗ, ಅದು ಅದರ ಪಕ್ಕದ ಅಂಚುಗಳನ್ನು ಸ್ಪರ್ಶಿಸುವ ರೀತಿಯಲ್ಲಿ "ಆಕರ್ಷಿತವಾಗುತ್ತದೆ". ಅಂತಹ ಬೈಂಡಿಂಗ್ಗಾಗಿ, ನೀವು ಸ್ವೀಕರಿಸುವ ಒಂದನ್ನು ಮಾತ್ರವಲ್ಲದೆ ಯಾವುದೇ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾನು ಡಿವ್ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿದ್ದೇನೆ ಮತ್ತು ಸ್ನ್ಯಾಪ್ ಆಯ್ಕೆಯನ್ನು ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸಿದ್ದೇನೆ ಅದು ಆ ಅಂಶವನ್ನು ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಸ್ವೀಕರಿಸುವ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತದೆ.
ಅಂಶಗಳ ಆಂಕರ್ ಮಾಡುವ ನಡವಳಿಕೆಯನ್ನು ಹೆಚ್ಚು ನಿಖರವಾಗಿ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಒಂದೆರಡು ಸಹಾಯಕ ಆಯ್ಕೆಗಳಿವೆ. ಅವುಗಳಲ್ಲಿ ಒಂದು snapMode ಆಯ್ಕೆಯಾಗಿದೆ. ಅದರ ಸಹಾಯದಿಂದ ನೀವು ಬೈಂಡಿಂಗ್ ಪ್ರಕಾರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಕೆಳಗಿನ ಮೌಲ್ಯಗಳನ್ನು ಅನುಮತಿಸಲಾಗಿದೆ: ಒಳಗಿನ(ಅಂಶಗಳ ಒಳ ಅಂಚುಗಳಿಗೆ ಸ್ನ್ಯಾಪ್ ಮಾಡಿ), ಹೊರಗಿನ(ಅಂಶಗಳ ಹೊರ ಅಂಚುಗಳಿಗೆ ಸ್ನ್ಯಾಪ್ ಮಾಡಿ) ಮತ್ತು ಎರಡೂ(ಎಲ್ಲಾ ಅಂಚುಗಳಿಗೆ ಸ್ನ್ಯಾಪ್ ಮಾಡಿ; ಡೀಫಾಲ್ಟ್).
ಸ್ನ್ಯಾಪ್ ಟಾಲರೆನ್ಸ್ ಆಯ್ಕೆಯು ಸ್ನ್ಯಾಪಿಂಗ್ ಸಂಭವಿಸುವ ಮೊದಲು ಫ್ಲೋಟೆಡ್ ಎಲಿಮೆಂಟ್ ಟಾರ್ಗೆಟ್ ಎಲಿಮೆಂಟ್‌ನ ಅಂಚಿಗೆ ಎಷ್ಟು ದೂರ ತಲುಪಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯವು 20 ಆಗಿದೆ, ಅಂದರೆ 20 ಪಿಕ್ಸೆಲ್‌ಗಳು. ಉದಾಹರಣೆಯು 50 ರ ಮೌಲ್ಯವನ್ನು ಬಳಸುತ್ತದೆ, ಇದು ದೊಡ್ಡ ದೂರದಲ್ಲಿ ಸ್ನ್ಯಾಪ್ಗೆ ಅನುರೂಪವಾಗಿದೆ. ಈ ಆಯ್ಕೆಗೆ ಸರಿಯಾದ ಮೌಲ್ಯವನ್ನು ಆರಿಸುವುದು ಬಹಳ ಮುಖ್ಯ. ಸ್ನ್ಯಾಪ್ ಟಾಲರೆನ್ಸ್ ಮೌಲ್ಯವು ತುಂಬಾ ಕಡಿಮೆಯಿದ್ದರೆ, ಬಳಕೆದಾರರು ಸ್ನ್ಯಾಪಿಂಗ್ ಪರಿಣಾಮವನ್ನು ಗಮನಿಸದೇ ಇರಬಹುದು ಮತ್ತು ಅದು ತುಂಬಾ ಹೆಚ್ಚಿದ್ದರೆ, ಚಲಿಸುವ ಅಂಶವು ಅನಿರೀಕ್ಷಿತ ಜಿಗಿತಗಳನ್ನು ಮಾಡಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ, ದೂರದ ಅಂಶಗಳಿಗೆ ಸ್ನ್ಯಾಪ್ ಆಗುತ್ತದೆ.
ತಂತ್ರಜ್ಞಾನದ ಬಳಕೆ ಎಳೆಯಿರಿ ಮತ್ತು ಬಿಡಿ(ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್) ಬಳಕೆದಾರರಿಗೆ ವಿವಿಧ ವಸ್ತುಗಳನ್ನು ಒಂದರಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ಸರಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ, ಒಂದು ಪಟ್ಟಿಯ ಅಂಶಗಳು ಇನ್ನೊಂದಕ್ಕೆ. ಇದನ್ನು ಮಾಡಲು, ನೀವು ಎರಡು ನಿಯಂತ್ರಣಗಳನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ: ಸಿಂಕ್ ಮತ್ತು ಮೂಲ. ರಿಸೀವರ್ ಎನ್ನುವುದು ಮೂಲ ವಸ್ತುವನ್ನು ಸ್ವೀಕರಿಸುವ ವಸ್ತುವಾಗಿದೆ (ಸಲಿಸುವ ವಸ್ತು).
ವಸ್ತುಗಳ ಚಲನೆಯ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸುವ ಘಟನೆಗಳು ಅವು ಸಂಭವಿಸುವ ಕ್ರಮದಲ್ಲಿ ಕೆಳಗೆ ಪಟ್ಟಿಮಾಡಲಾಗಿದೆ.
OnStartDrag(ಟೈಪ್ 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 ವಿಧಾನ, ಪ್ರೋಗ್ರಾಮರ್ನಿಂದ ಕೋಡ್ ಮಾಡಬೇಕು.
ವಸ್ತುವನ್ನು ಕ್ರೋಢೀಕರಿಸಲು, ನಾವು ಈ ಕೆಳಗಿನ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ. ಪ್ಯಾನಲ್ ಘಟಕವನ್ನು ಫಾರ್ಮ್‌ನಲ್ಲಿ ಇರಿಸಿ. ಆಬ್ಜೆಕ್ಟ್ ಇನ್‌ಸ್ಪೆಕ್ಟರ್‌ನ ಡ್ರ್ಯಾಗ್‌ಮೋಡ್ ಆಸ್ತಿಯನ್ನು ಡಿಎಂಆಟೋಮ್ಯಾಟಿಕ್‌ಗೆ ಹೊಂದಿಸಿ. ಫಾರ್ಮ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡೋಣ ಮತ್ತು ಕೆಳಗಿನ ಈವೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಆಬ್ಜೆಕ್ಟ್ ಇನ್‌ಸ್ಪೆಕ್ಟರ್ ಅನ್ನು ಬಳಸೋಣ:
ಕಾರ್ಯವಿಧಾನ TForm1.FormDragOver(ಕಳುಹಿಸುವವರು, ಮೂಲ: TObject; X, Y: ಪೂರ್ಣಾಂಕ; ರಾಜ್ಯ: TDragState; var ಸ್ವೀಕರಿಸಿ: ಬೂಲಿಯನ್); ಮೂಲ = ಪ್ಯಾನೆಲ್ 1 ಆಗಿದ್ದರೆ ಪ್ರಾರಂಭಿಸಿ ನಂತರ ಸ್ವೀಕರಿಸಿ:= ನಿಜ ಬೇರೆ ಸ್ವೀಕರಿಸಿ:= ತಪ್ಪು; ಅಂತ್ಯ; ಕಾರ್ಯವಿಧಾನ TForm1.FormDragDrop(ಕಳುಹಿಸುವವರು, ಮೂಲ: TObject; X, Y: ಪೂರ್ಣಾಂಕ); Panel1 ಅನ್ನು ಪ್ರಾರಂಭಿಸಿ.ಎಡ:= X; ಪ್ಯಾನೆಲ್1.ಟಾಪ್:= ವೈ; ಅಂತ್ಯ;
ಈಗ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೂಲಕ ಮತ್ತು ಫಲಕದ ಮೇಲಿರುವ ಮೌಸ್ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ, ನಾವು ಪ್ಯಾನಲ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಫಾರ್ಮ್ ಉದ್ದಕ್ಕೂ ಚಲಿಸಬಹುದು.
ಬಾಟಮ್ ಲೈನ್: ನಾವು ತಂತ್ರಜ್ಞಾನದೊಂದಿಗೆ ಪರಿಚಯವಾಯಿತು ಎಳೆಯಿರಿ ಮತ್ತು ಬಿಡಿ(ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್) ಮತ್ತು ಅದನ್ನು ಆಚರಣೆಯಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ.
ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ತಂತ್ರಗಳು ಹಲವು ವರ್ಷಗಳಿಂದ ವಿಕಸನಗೊಂಡಿವೆ. ಓಪನ್ ಸೋರ್ಸ್ ಪ್ಲಗ್‌ಇನ್‌ಗಳನ್ನು (jQuery ನಂತಹ) ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತಿರುವ ಪ್ರೋಗ್ರಾಮರ್‌ಗಳ ಸಂಖ್ಯೆ ಹೆಚ್ಚಾಗುವುದರೊಂದಿಗೆ, ಹಳೆಯ ವಿಧಾನಗಳನ್ನು ಪುನರುಜ್ಜೀವನಗೊಳಿಸುತ್ತಿರುವುದು ಆಶ್ಚರ್ಯವೇನಿಲ್ಲ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯು ಹೆಚ್ಚು ಸ್ಪಂದಿಸುತ್ತದೆ ಮತ್ತು ವೆಬ್ ತಂತ್ರಜ್ಞಾನದ ಈ ಯುಗದಲ್ಲಿ ಹಲವು ಸುಧಾರಣೆಗಳನ್ನು ನೀಡುತ್ತದೆ.
ಈ ಟ್ಯುಟೋರಿಯಲ್ ನಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಡೈನಾಮಿಕ್ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಆಯತಗಳನ್ನು ರಚಿಸಲು ನೀವು ಬಳಸಬಹುದಾದ ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ನಾವು ಮಾಡುತ್ತೇವೆ. ಪ್ರಕ್ರಿಯೆಯನ್ನು jQuery ನಿರ್ವಹಿಸುತ್ತದೆ. ಅಂತಹ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ರೆಡಿಮೇಡ್ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಸಮಯವನ್ನು ಉಳಿಸುತ್ತವೆ! ಮತ್ತು ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಲೈಬ್ರರಿಯನ್ನು ಇತರ ಯೋಜನೆಗಳಲ್ಲಿ ಬಳಸಬಹುದು.
ಮೊದಲನೆಯದಾಗಿ, ಯೋಜನೆಗಾಗಿ ಸಣ್ಣ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಸಿದ್ಧಪಡಿಸೋಣ. ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ನೀವು "js" ಮತ್ತು "css" ಎಂಬ ಗಮನಾರ್ಹ ಹೆಸರುಗಳು ಮತ್ತು ಖಾಲಿ ಫೈಲ್‌ನೊಂದಿಗೆ ಎರಡು ಡೈರೆಕ್ಟರಿಗಳನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ index.html. ಕೋಡ್ ತುಂಬಾ ಸರಳವಾಗಿರುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಕೆಲಸದ ಸ್ಪಷ್ಟ ಕಲ್ಪನೆ ಇರುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚಿನ ಅಭಿವೃದ್ಧಿಗೆ ಒಂದು ಅಂಶವಿದೆ.
ನಮ್ಮ HTML ಫೈಲ್‌ಗಾಗಿ ಕೋಡ್ ಕೆಳಗೆ ಇದೆ. ಅಧ್ಯಾಯದಲ್ಲಿ ತಲೆನಾವು 3 ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಸೇರಿಸುತ್ತೇವೆ. ಮುಖ್ಯ jQuery ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು Google ಕೋಡ್ ಸರ್ವರ್‌ನಿಂದ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ. ನಮ್ಮ ಶೈಲಿಯ ಫೈಲ್ style.css ಅನ್ನು ಸಹ ಸೇರಿಸಲಾಗಿದೆ, ಇದು ರಚನೆಯ ಮುಖ್ಯ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಒಳಗೊಂಡಿದೆ ಕಾಣಿಸಿಕೊಂಡನಮ್ಮ ದಾಖಲೆ.
ನನ್ನನ್ನು ಎಳೆಯಿರಿ ಹೌದು, ಹೌದು. ನಿಖರವಾಗಿ ನಾನು. ನೀವು ನನ್ನನ್ನೂ ಎಳೆಯಬಹುದು (zIndex: 200, ಅಪಾರದರ್ಶಕತೆ: .9 )
P.S.: ನೀವು ನನ್ನನ್ನು ಎಲ್ಲಿ ಬೇಕಾದರೂ ಬಿಡಬಹುದು!
ಒಳಗೆ ವಿಭಾಗ ದೇಹಕೇವಲ ಎರಡು ಬ್ಲಾಕ್ಗಳನ್ನು ಇರಿಸಲಾಗಿದೆ ವಿಭಾಗ, ಇದು ಎರಡೂ ಆಯತಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಕೋಡ್ ಸಾಕಷ್ಟು ಸರಳ ಮತ್ತು ಅರ್ಥವಾಗುವಂತಹದ್ದಾಗಿದೆ. ಪ್ರತಿಯೊಂದು ಆಯತದ ಒಳಗೆ ಕ್ಲಾಸ್ ಹ್ಯಾಂಡ್ಲರ್ ಮತ್ತು ಹ್ಯಾಂಡ್ಲರ್2 ಜೊತೆಗೆ ಹೆಡರ್‌ಗಳಿವೆ. ಇದು ಮುಖ್ಯವಾಗಿದೆ ಏಕೆಂದರೆ ನೀವು ಎಳೆಯುವಾಗ ಪ್ರತಿಯೊಂದು ಆಯತವು ವಿಭಿನ್ನವಾಗಿ ವರ್ತಿಸುತ್ತದೆ.
HTML ಕೋಡ್ ತುಂಬಾ ಸರಳವಾಗಿದೆ. ನೀವು ಮೂಲಭೂತ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡರೆ, ನಂತರ CSS ಶೈಲಿಗಳು ಕಷ್ಟವಾಗುವುದಿಲ್ಲ. ಮುಖ್ಯವಾಗಿ ಮಾರ್ಜಿನ್‌ಗಳು, ಪ್ಯಾಡಿಂಗ್‌ಗಳು ಮತ್ತು ಬಣ್ಣಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ.
ದೇಹ, html ( ಫಾಂಟ್-ಕುಟುಂಬ:ಕ್ಯಾಲಿಬ್ರಿ, ಸಾನ್ಸ್-ಸೆರಿಫ್; ಹಿನ್ನೆಲೆ:#eaf3fb; ಫಾಂಟ್-ಗಾತ್ರ:12px; ಎತ್ತರ:1000px; ಲೈನ್-ಎತ್ತರ:18px; ) p (ಎತ್ತರ:30px; )
ಆಯ್ಕೆಗಾರರು ದೇಹ, htmlಡೆಮೊ ಪುಟಕ್ಕೆ ಮಾತ್ರ ಬಳಸಲಾಗುತ್ತದೆ. ಮತ್ತು ಎಲ್ಲಾ ವಿಷಯವನ್ನು ಎರಡು ಎಳೆಯಬಹುದಾದ ಆಯತಗಳಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ.
Dv1 (ಅಗಲ:200px; ಹಿನ್ನೆಲೆ-ಬಣ್ಣ:#eff7ff; ಗಡಿ:1px ಘನ #96c2f1; ಸ್ಥಾನ:ಸಂಪೂರ್ಣ; ಎಡ:100px; ಮೇಲ್ಭಾಗ:100px; ) .dv1 h2 (ಹಿನ್ನೆಲೆ-ಬಣ್ಣ:#b2d3f5; ಪ್ಯಾಡಿಂಗ್:5px; ಫಾಂಟ್- ಕುಟುಂಬ:ಜಾರ್ಜಿಯಾ, "ಟೈಮ್ಸ್ ನ್ಯೂ ರೋಮನ್", ಟೈಮ್ಸ್, ಸೆರಿಫ್; ಫಾಂಟ್-ಗಾತ್ರ: 1.0em; ಪಠ್ಯ-ರೂಪಾಂತರ: ದೊಡ್ಡಕ್ಷರ; ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ; ಬಣ್ಣ:#3a424a; ಅಂಚು:1px; ಕರ್ಸರ್:ಮೂವ್; ) .dv1 div (ಪ್ಯಾಡಿಂಗ್:5px; ಅಂಚು-ಕೆಳ:10px; ) .dv2 (ಹಿನ್ನೆಲೆ-ಬಣ್ಣ:#f6ebfb; ಗಡಿ:1px ಘನ #a36fde; ಅಗಲ:550px; ಸ್ಥಾನ:ಸಂಪೂರ್ಣ; ಕರ್ಸರ್:ಮೂವ್; ಎಡ:400px; ಮೇಲ್ಭಾಗ:230px; ) .dv2 h2 (ಹಿನ್ನೆಲೆ-ಬಣ್ಣ:#eacfe9; ಅಕ್ಷರದ ಅಂತರ:-0.09em; ಫಾಂಟ್-ಗಾತ್ರ:1.8em; ಫಾಂಟ್-ತೂಕ: ದಪ್ಪ; ಪ್ಯಾಡಿಂಗ್:15px; ಅಂಚು:1px; ಬಣ್ಣ:#241f24; ಕರ್ಸರ್:ಮೂವ್; ) .dv2 .content2 (ಪ್ಯಾಡಿಂಗ್:5px; ಅಂಚು-ಕೆಳಗೆ:10px; )
.dv1 ಮತ್ತು .dv2 ಎರಡೂ ವರ್ಗಗಳಿಗೆ ನಾವು ಸಂಪೂರ್ಣ ಸ್ಥಾನೀಕರಣವನ್ನು ಬಳಸುತ್ತೇವೆ. ಇದು ಅನಿವಾರ್ಯವಲ್ಲ ಮತ್ತು ಬಹುಶಃ ಹೆಚ್ಚು ಅಲ್ಲ ಅತ್ಯುತ್ತಮ ಮಾರ್ಗಎಳೆಯಬಹುದಾದ ಆಯತಗಳನ್ನು ಇರಿಸಲು. ಆದಾಗ್ಯೂ, ನಮ್ಮ ಉದಾಹರಣೆಗಾಗಿ, ಈ ಸ್ಥಾನೀಕರಣವು ಅರ್ಥಪೂರ್ಣವಾಗಿದೆ, ಏಕೆಂದರೆ ಪ್ರತಿ ಬಾರಿ ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿದಾಗ, ಆಯತಗಳನ್ನು ಕೆಲವು ಸ್ಥಳಗಳಲ್ಲಿ ಸ್ಥಾಪಿಸಲಾಗುತ್ತದೆ.
ವ್ಯತ್ಯಾಸವನ್ನು ನೋಡಲು ಸುಲಭವಾಗುವಂತೆ ಆಯತಗಳಿಗೆ ಫಾಂಟ್‌ಗಳು ಮತ್ತು ಬಣ್ಣಗಳು ವಿಭಿನ್ನವಾಗಿವೆ.
ಇಲ್ಲದಿದ್ದರೆ, ಬ್ಲಾಕ್‌ಗಳ ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ವಿಷಯವು ಬಹುತೇಕ ಒಂದೇ ಆಗಿರುತ್ತದೆ. ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ ನೀವು ಶೈಲಿಗಳನ್ನು ನಕಲಿಸುತ್ತಿದ್ದರೆ, ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಹೆಸರುಗಳನ್ನು ಬದಲಾಯಿಸಿ. ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ಒಂದು ನಿರ್ದಿಷ್ಟ ಬ್ಲಾಕ್‌ಗಾಗಿ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ತಂತ್ರವನ್ನು ಬಳಸುವಾಗ ತರಗತಿಗಳ ಬದಲಿಗೆ ID ಗಳನ್ನು ಬಳಸುವುದು ಹೆಚ್ಚು ಸಮಂಜಸವಾಗಿದೆ.
JavaScript ಅನ್ನು ಪಾರ್ಸಿಂಗ್ ಮಾಡಲಾಗುತ್ತಿದೆಎರಡು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳು ಕಾರ್ಯನಿರ್ವಹಿಸಲು ಅಗತ್ಯವಿರುವ ಎಲ್ಲಾ ಕೋಡ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ನಾವು jQuery ಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ವಿವರಗಳನ್ನು ಬಿಟ್ಟುಬಿಡುತ್ತೇವೆ, ಏಕೆಂದರೆ ಇದು ಪಾಠದ ವ್ಯಾಪ್ತಿಯನ್ನು ಮೀರಿದೆ. jquery.dragndrop.js ಫೈಲ್‌ಗೆ ಗಮನ ಕೊಡೋಣ.
ಸಾಲು 22 ಡ್ರ್ಯಾಗ್ಸ್ ಕಾರ್ಯವನ್ನು ವಿವರಿಸುತ್ತದೆ.
ಡಾಲರ್ );
ಇದು ರಿಟರ್ನ್ ವೇರಿಯೇಬಲ್ ಮತ್ತು ಇನಿಶಿಯಲೈಸೇಶನ್ ಡೇಟಾವನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಎಳೆಯುತ್ತದೆ. ಇತರ ಕಾರ್ಯಗಳಿಗೆ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಲು jQuery ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಈ ವಿಧಾನವನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಆಂತರಿಕವಾಗಿ ನಾವು ಆಯತಗಳನ್ನು ಎಳೆಯಲು ಲಭ್ಯವಿರುವ ಎಲ್ಲಾ ಆಯ್ಕೆಗಳಿಗೆ ಅಸ್ಥಿರಗಳನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ.
ಕೋಡ್‌ನ ಮುಂದಿನ ತುಣುಕು ಡ್ರ್ಯಾಗ್‌ಡ್ರಾಪ್ ವೇರಿಯೇಬಲ್‌ಗಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ. ಎರಡೂ ಘಟನೆಗಳು ಎಳೆಯಿರಿಮತ್ತು ಬಿಡಿಈವೆಂಟ್ ನಿಯತಾಂಕಗಳನ್ನು ಅವರಿಗೆ ರವಾನಿಸುವ ಕಾರ್ಯಗಳನ್ನು ಕರೆ ಮಾಡಿ. ವಸ್ತುವನ್ನು ಎಳೆಯಲು ಮತ್ತು ನಂತರ ಅದನ್ನು ಬಿಡುಗಡೆ ಮಾಡಲು ನೀವು ಮೌಸ್ ಗುಂಡಿಯನ್ನು ಒತ್ತಿದಾಗ ಈ ಘಟನೆಗಳು ಸಂಭವಿಸುತ್ತವೆ.
ವರ್ ಡ್ರ್ಯಾಗ್‌ಂಡ್ರಾಪ್ = (ಡ್ರ್ಯಾಗ್: ಫಂಕ್ಷನ್(ಇ) (ವರ್ ಡ್ರ್ಯಾಗ್‌ಡೇಟಾ = ಇ.ಡೇಟಾ.ಡ್ರಾಗ್‌ಡೇಟಾ; ಡ್ರ್ಯಾಗ್‌ಡೇಟಾ.ಟಾರ್ಗೆಟ್.ಸಿಎಸ್‌ಎಸ್((ಎಡ: ಡ್ರ್ಯಾಗ್‌ಡೇಟಾ.ಲೆಫ್ಟ್ + ಇ.ಪೇಜ್‌ಎಕ್ಸ್ - ಡ್ರ್ಯಾಗ್‌ಡೇಟಾ.ಆಫ್‌ಲೆಫ್ಟ್, ಟಾಪ್: ಡ್ರ್ಯಾಗ್‌ಡೇಟಾ.ಟಾಪ್ + ಇ. - dragData.offTop ));dragData.handler.css((ಕರ್ಸರ್: "ಮೂವ್" )); dragData.target.css ((ಕರ್ಸರ್: "ಮೂವ್" )); dragData.onMove(e); ), ಡ್ರಾಪ್: ಫಂಕ್ಷನ್( ಇ) (var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(("ಅಪಾರದರ್ಶಕತೆ": "" )); dragData.handler.css("ಕರ್ಸರ್", ಡ್ರ್ಯಾಗ್‌ಡಾಟಾ. oldCss.cursor);dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); ) )
ನಮ್ಮ ಕಾರ್ಯಗಳು ಪ್ರತಿ ವಸ್ತುವಿನ CSS ಸ್ಥಾನೀಕರಣವನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುತ್ತವೆ. ನಿಮ್ಮ ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಸಂಪೂರ್ಣ ಸ್ಥಾನವನ್ನು ಬದಲಾಯಿಸುವುದು ನಿಮ್ಮ ಕೋಡ್ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಪ್ರತಿಯೊಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯವು ವಸ್ತುವಿಗಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಯಾವುದೇ ಶೈಲಿಯನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ.
ಉಳಿದ ಕೋಡ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ ಮತ್ತು ಇತರ ಶೈಲಿಗಳಿಗೆ ಕಾಸ್ಮೆಟಿಕ್ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡುತ್ತದೆ. ಇಲ್ಲಿ ನೀವು ಪಾರದರ್ಶಕತೆ, ಫಾಂಟ್ ಮತ್ತು ಫಾಂಟ್ ಬಣ್ಣಕ್ಕೆ ಬದಲಾವಣೆಗಳನ್ನು ಸೇರಿಸಬಹುದು ಅಥವಾ ಹೊಸ ಪ್ಯಾರಾಗಳನ್ನು ಸೇರಿಸಬಹುದು.
ಡ್ರ್ಯಾಗ್/ಡ್ರಾಪ್ ಕಾರ್ಯಗಳುಎರಡನೇ fn.js ಫೈಲ್ ತುಂಬಾ ಸರಳವಾದ ಕೋಡ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ. ನಾವು ಕಾಯುತ್ತಿದ್ದೇವೆ ಪೂರ್ಣ ಲೋಡ್ಡಾಕ್ಯುಮೆಂಟ್, ಅದರ ನಂತರ ನಾವು ನಮ್ಮ ಕಾರ್ಯಗಳನ್ನು ಕರೆಯುತ್ತೇವೆ. ಕಾರ್ಯದ ಎರಡು ನಿದರ್ಶನಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ ಎಳೆಯುತ್ತದೆ, ಇದನ್ನು ಮೊದಲೇ ಚರ್ಚಿಸಲಾಗಿದೆ.
.dv1 ಮತ್ತು .dv2 ತರಗತಿಗಳೊಂದಿಗೆ ನಾವು ಎರಡು ಚಲಿಸಬಲ್ಲ ಬ್ಲಾಕ್ಗಳನ್ನು ಹೊಂದಿದ್ದೇವೆ. ನೀವು ಒಂದು ಚಲಿಸಬಲ್ಲ ಬ್ಲಾಕ್ ಅನ್ನು ಬಿಡಬೇಕಾದರೆ, ನೀವು ಕೋಡ್‌ನ ಎರಡನೇ ಭಾಗವನ್ನು ತೆಗೆದುಹಾಕಬೇಕಾಗುತ್ತದೆ. ಮತ್ತೊಂದು ಚಲಿಸಬಲ್ಲ ಬ್ಲಾಕ್ ಅನ್ನು ಸೇರಿಸುವುದು ಸಹ ಸುಲಭ. ಈ ಫೈಲ್‌ನಲ್ಲಿ ನೀವು ಹೊಸ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ.
ಕಾರ್ಯವನ್ನು ಕರೆಯುವಾಗ ಆಯ್ಕೆಗಳನ್ನು ಹೊಂದಿಸುವುದು ಮೊದಲ ಹಂತವಾಗಿದೆ. ಹ್ಯಾಂಡ್ಲರ್ ಹೆಸರನ್ನು ಹೊಂದಿಸಲು ಮರೆಯದಿರಿ. ಇದರೊಂದಿಗೆ, ಡಾಕ್ಯುಮೆಂಟ್‌ನ ನಿರ್ದಿಷ್ಟ ಪ್ರದೇಶದಲ್ಲಿ ಮೌಸ್ ಬಟನ್ ಒತ್ತಿದಾಗ ಯಾವ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಬಳಸಬೇಕೆಂದು ನಾವು jQuery ಗೆ ಹೇಳುತ್ತೇವೆ. ಹ್ಯಾಂಡ್ಲರ್ ಹೆಸರು ವರ್ಗ ಅಥವಾ ಐಡಿ ಗುಣಲಕ್ಷಣವಾಗಿರಬಹುದು.
ನಮ್ಮ ಮೊದಲ ಕಾರ್ಯವು onMove ಮತ್ತು onDrop ಎಂಬ ಎರಡು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಹೊಂದಿದೆ. ಪ್ರಸ್ತುತ ಈವೆಂಟ್‌ಗೆ ರವಾನಿಸಲಾದ ಹೊಸ ಕಾರ್ಯಗಳನ್ನು ಎರಡೂ ವೇರಿಯಬಲ್‌ಗಳಾಗಿ ಕರೆಯುತ್ತವೆ. ಪ್ರತಿ ಚಲನೆಯೊಂದಿಗೆ ನವೀಕರಿಸಲು ಆಯತದಲ್ಲಿರುವ HTML ಕೋಡ್ ಅನ್ನು ಇಲ್ಲಿಯೇ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ. ಸರಳವಾದ jQuery ಈವೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ಪ್ರಕ್ರಿಯೆಯನ್ನು ಹೇಗೆ ನಿಯಂತ್ರಿಸಬಹುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸಲು ಇದು ಉತ್ತಮ ಪರಿಣಾಮವಾಗಿದೆ.
ಎರಡನೇ ಕಾರ್ಯದಲ್ಲಿ ನಾವು z-ಇಂಡೆಕ್ಸ್ ಮತ್ತು ಅಪಾರದರ್ಶಕತೆ ನಿಯತಾಂಕಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. ನೀವು ಇತರ CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸೇರಿಸಬಹುದೇ? ಆದರೆ ಇದಕ್ಕೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಅನ್ನು ಪುನಃ ಕೆಲಸ ಮಾಡುವ ಅಗತ್ಯವಿರುತ್ತದೆ ಆದ್ದರಿಂದ ಸೆಟ್ಟಿಂಗ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಚಲಿಸುವ ಆಯತದ ಎತ್ತರ ಮತ್ತು ಅಗಲಕ್ಕಾಗಿ ನೀವು ವಿಭಿನ್ನ ಫಾಂಟ್ ಶೈಲಿ ಅಥವಾ ಮೌಲ್ಯಗಳನ್ನು ರವಾನಿಸಬಹುದು - ಬಹಳ ಆಸಕ್ತಿದಾಯಕ ಟ್ರಿಕ್!
ತೀರ್ಮಾನಸ್ವಲ್ಪ ಕೆಲಸದೊಂದಿಗೆ, ನಾವು ಈಗ ನಮ್ಮ ವಿಲೇವಾರಿಯಲ್ಲಿ ಉತ್ತಮ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ. ತಮ್ಮ ಯೋಜನೆಗಳಲ್ಲಿ ಹಳೆಯ ವಿಧಾನಗಳನ್ನು ಬಳಸಲು ಉತ್ಸುಕರಾಗಿರುವ ಡೆವಲಪರ್‌ಗಳಿಗೆ jQuery ದೊಡ್ಡ ಪ್ರಯೋಜನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಪರಿಣಾಮವಾಗಿ, ನಾವು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಕಾರ್ಯಗಳನ್ನು ಮಾತ್ರ ಹೊಂದಿರುವುದಿಲ್ಲ, ಆದರೆ ನಾವು ಎಳೆಯಬಹುದಾದ ಬ್ಲಾಕ್‌ಗಳಿಗೆ ಹೊಸ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಇದು ಸೃಜನಶೀಲತೆಗೆ ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ. ಪಾಠದ ಪ್ರದರ್ಶನವು ಅಂತಹ ಕೋಡ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಏನು ಮಾಡಬಹುದು ಎಂಬುದರ ರೇಖಾಚಿತ್ರವನ್ನು ಮಾತ್ರ ಒಳಗೊಂಡಿದೆ.
ಆದ್ದರಿಂದ ಲೈಬ್ರರಿ ಕಾರ್ಯಗಳನ್ನು ಬಳಸಲು jQuery ದಸ್ತಾವೇಜನ್ನು ಪರಿಶೀಲಿಸಿ.
VCL ಲೈಬ್ರರಿಗಾಗಿ, ಬೋರ್ಲ್ಯಾಂಡ್ ತನ್ನದೇ ಆದ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಇಂಟರ್ಫೇಸ್ನ ಆವೃತ್ತಿಯನ್ನು ಅಳವಡಿಸಿದೆ ("ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್" ಎಂದು ಅನುವಾದಿಸಲಾಗಿದೆ). ಈ ಇಂಟರ್ಫೇಸ್ ಆಂತರಿಕವಾಗಿದೆ - ನೀವು ಫಾರ್ಮ್‌ನೊಳಗೆ ಯಾವುದೇ ಡೆಲ್ಫಿ ನಿಯಂತ್ರಣಗಳನ್ನು ಕಳುಹಿಸಬಹುದು ಮತ್ತು ಸ್ವೀಕರಿಸಬಹುದು (ಫಾರ್ಮ್ ಅನ್ನು ಹೊರತುಪಡಿಸಿ). ಅನುಗುಣವಾದ Windows API ಕಾರ್ಯಗಳನ್ನು ಬಳಸದೆಯೇ ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ - ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಮಾಡುವ ಮೂಲಕ ಇತರ ಕಾರ್ಯಗಳೊಂದಿಗೆ ಸಂವಹನವನ್ನು ಆಯೋಜಿಸುವಾಗ ಅವುಗಳನ್ನು ಬಳಸಬೇಕು.
ನಿಯಂತ್ರಣದ ಮೇಲೆ ಎಡ ಮೌಸ್ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ, ನಾವು ಅದನ್ನು ಯಾವುದೇ ಇತರ ಅಂಶಕ್ಕೆ "ಡ್ರ್ಯಾಗ್" ಮಾಡಬಹುದು. ಪ್ರೋಗ್ರಾಮರ್ನ ದೃಷ್ಟಿಕೋನದಿಂದ, ಇದರರ್ಥ ಕೀಲಿಯನ್ನು ಎಳೆಯುವ ಮತ್ತು ಬಿಡುಗಡೆ ಮಾಡುವ ಕ್ಷಣಗಳಲ್ಲಿ ಕೆಲವು ಘಟನೆಗಳು ಉತ್ಪತ್ತಿಯಾಗುತ್ತವೆ, ಇದು ಎಲ್ಲಾ ಅಗತ್ಯ ಮಾಹಿತಿಯನ್ನು ರವಾನಿಸುತ್ತದೆ - ಎಳೆದ ವಸ್ತುವಿಗೆ ಪಾಯಿಂಟರ್, ಕರ್ಸರ್ನ ಪ್ರಸ್ತುತ ನಿರ್ದೇಶಾಂಕಗಳು, ಇತ್ಯಾದಿ. ಘಟನೆಗಳಲ್ಲಿ ಕರ್ಸರ್ ಪ್ರಸ್ತುತ ಇರುವ ಅಂಶವಾಗಿದೆ. ಅಂತಹ ಈವೆಂಟ್‌ಗಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ನಿಯಂತ್ರಣವು ಕಳುಹಿಸುವಿಕೆಯನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ಸಿಸ್ಟಮ್ಗೆ ತಿಳಿಸಬೇಕು. ಸ್ವೀಕರಿಸುವ ನಿಯಂತ್ರಣದ ಮೇಲಿನ ಬಟನ್ ಬಿಡುಗಡೆಯಾದಾಗ, ಸ್ವೀಕರಿಸುವವರ ಸನ್ನದ್ಧತೆಯನ್ನು ಅವಲಂಬಿಸಿ ಒಂದು ಅಥವಾ ಎರಡು ಹೆಚ್ಚಿನ ಘಟನೆಗಳನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ.
ರದ್ದು ಡ್ರ್ಯಾಗ್ ಪ್ರಸ್ತುತ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಅಥವಾ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡಾಕ್ ಕಾರ್ಯಾಚರಣೆಯನ್ನು ರದ್ದುಗೊಳಿಸುತ್ತದೆ.
ಫಂಕ್ಷನ್ FindDragTarget (const Pos: TPoint ; AllowDisabled: Boolean ): TControl ;
ಕಾರ್ಯವು ಮೂಲ ವರ್ಗ TControl ನ ವಸ್ತುವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ, ಇದು Pos ನಿಯತಾಂಕದಿಂದ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ನಿರ್ದೇಶಾಂಕಗಳೊಂದಿಗೆ ಪರದೆಯ ಸ್ಥಾನವನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡ್ರಾಪ್ ಅಥವಾ ಡ್ರ್ಯಾಗ್-ಅಂಡ್-ಡಾಕ್ ಕಾರ್ಯಾಚರಣೆಯ ಸಂಭಾವ್ಯ ಸ್ವೀಕರಿಸುವವರನ್ನು ನಿರ್ಧರಿಸಲು ಈ ಕಾರ್ಯವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಸ್ಥಾನಕ್ಕೆ ಯಾವುದೇ ವಿಂಡೋ ನಿಯಂತ್ರಣವು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದರೆ, ಕಾರ್ಯವು ಶೂನ್ಯವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ . AllowDisabled ಪ್ಯಾರಾಮೀಟರ್ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ವಸ್ತುಗಳನ್ನು ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳಬೇಕೆ ಎಂದು ನಿರ್ಧರಿಸುತ್ತದೆ.
ಕಾರ್ಯ IsDragObject(ಕಳುಹಿಸುವವರು: TObject): ಬೂಲಿಯನ್;
ಕಳುಹಿಸುವವರ ಪ್ಯಾರಾಮೀಟರ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ವಸ್ತುವು TDragObject ವರ್ಗದ ವಂಶಸ್ಥರೇ ಎಂಬುದನ್ನು ಕಾರ್ಯವು ನಿರ್ಧರಿಸುತ್ತದೆ. ಎಳೆದ ವಸ್ತುವನ್ನು ಸ್ವೀಕರಿಸಲಾಗುತ್ತದೆಯೇ ಎಂದು ನಿರ್ಧರಿಸಲು ಈ ಕಾರ್ಯವನ್ನು OnDragOver ಮತ್ತು OnDockOver ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಲ್ಲಿ ಮೂಲ ನಿಯತಾಂಕವಾಗಿ ಬಳಸಬಹುದು. ಎಳೆದ ವಸ್ತುವನ್ನು ಸರಿಯಾಗಿ ಅರ್ಥೈಸಲು IsDragObject ಕಾರ್ಯವನ್ನು OnDragDrop ಮತ್ತು OnDockDrop ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಲ್ಲಿ ಮೂಲ ನಿಯತಾಂಕವಾಗಿಯೂ ಬಳಸಬಹುದು.
ಪ್ರಾಪರ್ಟೀಸ್ DragMode, DragCursor, ವಿಧಾನಗಳು BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, ಅಕ್ಸೆಪ್ಟ್ ಪ್ಯಾರಾಮೀಟರ್
ಮೌಸ್ ಬಳಸಿ ಮಾಹಿತಿಯನ್ನು ಒಂದು ವಸ್ತುವಿನಿಂದ ಇನ್ನೊಂದಕ್ಕೆ ಎಳೆಯುವ ಪ್ರಕ್ರಿಯೆಯು ವಿಂಡೋಸ್‌ನಲ್ಲಿ ವ್ಯಾಪಕವಾಗಿ ಬಳಸಲ್ಪಡುತ್ತದೆ.ನೀವು ಫೈಲ್‌ಗಳನ್ನು ಫೋಲ್ಡರ್‌ಗಳ ನಡುವೆ ಚಲಿಸಬಹುದು, ಫೋಲ್ಡರ್‌ಗಳನ್ನು ಸರಿಸಬಹುದು, ಇತ್ಯಾದಿ.
ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಪ್ರಕ್ರಿಯೆಗೆ ಸಂಬಂಧಿಸಿದ ಎಲ್ಲಾ ಗುಣಲಕ್ಷಣಗಳು, ವಿಧಾನಗಳು ಮತ್ತು ಘಟನೆಗಳನ್ನು TControl ವರ್ಗದಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ, ಇದು ಎಲ್ಲಾ ಡೆಲ್ಫಿ ದೃಶ್ಯ ಘಟಕಗಳ ಮೂಲವಾಗಿದೆ. ಆದ್ದರಿಂದ ಅವು ಎಲ್ಲಾ ಘಟಕಗಳಿಗೆ ಸಾಮಾನ್ಯವಾಗಿದೆ.
ಡ್ರ್ಯಾಗ್ ಮಾಡುವಿಕೆಯ ಪ್ರಾರಂಭವನ್ನು DragMode ಆಸ್ತಿಯಿಂದ ನಿರ್ಧರಿಸಲಾಗುತ್ತದೆ, ಇದನ್ನು ವಿನ್ಯಾಸದ ಸಮಯದಲ್ಲಿ ಹೊಂದಿಸಬಹುದು ಅಥವಾ dmManual ಅಥವಾ dmAutomatic ಗೆ ಸಮಾನವಾಗಿರುತ್ತದೆ. dmAutomatic ಮೌಲ್ಯವು ಬಳಕೆದಾರರು ಘಟಕದ ಮೇಲೆ ಮೌಸ್ ಬಟನ್ ಅನ್ನು ಒತ್ತಿದಾಗ ಡ್ರ್ಯಾಗ್ ಮಾಡುವ ಪ್ರಕ್ರಿಯೆಯು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆಯೇ ಎಂಬುದನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಮೌಸ್ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವ ಬಳಕೆದಾರರೊಂದಿಗೆ ಸಂಬಂಧಿಸಿದ OnMouseDown ಈವೆಂಟ್ ಈ ಘಟಕಕ್ಕಾಗಿ ಸಂಭವಿಸುವುದಿಲ್ಲ.
ಘಟಕಗಳನ್ನು ವರ್ಗಾಯಿಸುವ ಮತ್ತು ಸ್ವೀಕರಿಸುವ ಇಂಟರ್ಫೇಸ್ ಬಹಳ ಹಿಂದೆಯೇ ಕಾಣಿಸಿಕೊಂಡಿತು. ಅಪ್ಲಿಕೇಶನ್ ಚಾಲನೆಯಲ್ಲಿರುವಾಗ ಎರಡು ನಿಯಂತ್ರಣಗಳನ್ನು ಸಂವಹನ ಮಾಡಲು ಇದು ಅನುಮತಿಸುತ್ತದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಯಾವುದೇ ಅಗತ್ಯ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಮಾಡಬಹುದು. ಅನುಷ್ಠಾನದ ಸುಲಭತೆ ಮತ್ತು ದೀರ್ಘಕಾಲದ ಅಭಿವೃದ್ಧಿಯ ಹೊರತಾಗಿಯೂ, ಅನೇಕ ಪ್ರೋಗ್ರಾಮರ್ಗಳು (ವಿಶೇಷವಾಗಿ ಆರಂಭಿಕರು) ಈ ಕಾರ್ಯವಿಧಾನವನ್ನು ಅಸ್ಪಷ್ಟ ಮತ್ತು ವಿಲಕ್ಷಣವೆಂದು ಪರಿಗಣಿಸುತ್ತಾರೆ. ಆದಾಗ್ಯೂ, ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಅನ್ನು ಬಳಸುವುದು ತುಂಬಾ ಉಪಯುಕ್ತವಾಗಿದೆ ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಸುಲಭವಾಗಿದೆ. ಈಗ ನಾವು ಇದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುತ್ತೇವೆ.
ಕಾರ್ಯವಿಧಾನವು ಕಾರ್ಯನಿರ್ವಹಿಸಲು, ಎರಡು ನಿಯಂತ್ರಣಗಳನ್ನು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಕಾನ್ಫಿಗರ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ಒಂದು ಮೂಲವಾಗಿರಬೇಕು (ಮೂಲ), ಎರಡನೆಯದು ರಿಸೀವರ್ (ಗುರಿ) ಆಗಿರಬೇಕು. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಮೂಲವು ಎಲ್ಲಿಯೂ ಚಲಿಸುವುದಿಲ್ಲ, ಆದರೆ ಯಾಂತ್ರಿಕ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಮಾತ್ರ ನೋಂದಾಯಿಸಲಾಗಿದೆ.
ನನ್ನನ್ನು ನಂಬಿರಿ, OnDragOver ಮತ್ತು OnDragDrop ಈವೆಂಟ್‌ಗಳ ಪ್ಯಾರಾಮೀಟರ್‌ಗಳಲ್ಲಿ ರವಾನಿಸಲಾದ X,Y ನಿರ್ದೇಶಾಂಕಗಳನ್ನು ಫಾರ್ಮ್ ನಿರ್ದೇಶಾಂಕಗಳಾಗಿ ಪರಿವರ್ತಿಸಲು ಸಾಕು.
ಕರ್ಸರ್ ಚಲಿಸುತ್ತಿರುವ ಘಟಕದ ಎಡ ಮತ್ತು ಮೇಲಿನ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಿ. ನಾನು ನಿಮಗೆ ಒಂದು ಸರಳ ಉದಾಹರಣೆಯನ್ನು ನೀಡುತ್ತೇನೆ. ಫಾರ್ಮ್‌ನಲ್ಲಿ ಮೆಮೊ ಘಟಕವನ್ನು ಇರಿಸಿ ಮತ್ತು ಆಸ್ತಿಯನ್ನು alTop ಗೆ ಹೊಂದಿಸಿ. ಫಾರ್ಮ್‌ನಲ್ಲಿ ಫಲಕವನ್ನು ಇರಿಸಿ, ಆಸ್ತಿಯನ್ನು alTop ಗೆ ಹೊಂದಿಸಿ ಮತ್ತು ಎತ್ತರದ ಆಸ್ತಿಯನ್ನು ಸಣ್ಣ ಮೌಲ್ಯಕ್ಕೆ ಹೊಂದಿಸಿ, 6 ಅಥವಾ 7 ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು ಹೇಳಿ. DragMode ಅನ್ನು dmAutomatica ಮತ್ತು DragCursor ಅನ್ನು crVSplit ಗೆ ಹೊಂದಿಸಿ. ಮತ್ತೊಂದು ಮೆಮೊ ಘಟಕವನ್ನು ಇರಿಸಿ ಮತ್ತು alClient ಗೆ ಹೊಂದಿಸಿ. ಏಕಕಾಲದಲ್ಲಿ ಎರಡೂ ಮೆಮೊ ಘಟಕಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ, ಫಲಕ ಮತ್ತು ಕೆಳಗೆ ತೋರಿಸಿರುವಂತೆ ಸಾಮಾನ್ಯ OnDragOver ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ರಚಿಸಿ:
ಇತ್ತೀಚೆಗೆ ನಾನು Android ಗಾಗಿ ಆಟವನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು ಪ್ರಾರಂಭಿಸುವ ಕಲ್ಪನೆಯನ್ನು ಹೊಂದಿದ್ದೆ. ಮೊದಲಿಗೆ, ನಾನು ಚೆಸ್ ಬರೆಯಲು ನಿರ್ಧರಿಸಿದೆ. ಅಂಕಿಗಳನ್ನು ಚಲಿಸುವ ಕಾರ್ಯವಿಧಾನವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ತಂತ್ರಜ್ಞಾನವು ಪರಿಪೂರ್ಣವಾಗಿದೆ ಎಂದು ನನಗೆ ತೋರುತ್ತದೆ. ಪ್ರಾರಂಭಿಸದವರಿಗೆ, ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ವಿಧಾನವು ಒಂದು ಗ್ರಾಫಿಕ್ ವಸ್ತುವನ್ನು ಇನ್ನೊಂದಕ್ಕೆ ಎಳೆಯುವ ಮತ್ತು ಅದನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿದ ನಂತರ ಒಂದು ಅಥವಾ ಇನ್ನೊಂದು ಕ್ರಿಯೆಯನ್ನು ಮಾಡುವ ಸಾಮರ್ಥ್ಯ ಎಂದು ನಾನು ಗಮನಿಸುತ್ತೇನೆ. ನಿಮ್ಮ PC ಯ ಡೆಸ್ಕ್‌ಟಾಪ್‌ನಿಂದ ಶಾರ್ಟ್‌ಕಟ್ ಅನ್ನು ಕಸಕ್ಕೆ ಎಳೆಯುವ ಮೂಲಕ ಅದನ್ನು ಅಳಿಸುವುದು ಸರಳ ಉದಾಹರಣೆಯಾಗಿದೆ. ಲೇಬಲ್ ಅನ್ನು ಕಸದೊಳಗೆ "ಎಸೆಯುವ" ಮೂಲಕ, ನಾವು ಈ ಎರಡು ವಸ್ತುಗಳನ್ನು ಸಂವಹನ ಮಾಡಲು ಒತ್ತಾಯಿಸಲು ಬಯಸುತ್ತೇವೆ ಎಂದು ನಾವು ಸಿಸ್ಟಮ್ಗೆ ಹೇಳುತ್ತೇವೆ. ಸಿಸ್ಟಮ್ ನಮ್ಮ ಸಂಕೇತವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಅದು ಯಾವ ಕ್ರಮವನ್ನು ತೆಗೆದುಕೊಳ್ಳಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಅದರ ಅರ್ಥಗರ್ಭಿತ ಸ್ಪಷ್ಟತೆಯಿಂದಾಗಿ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ವ್ಯಾಪಕವಾಗಿದೆ. ಈ ವಿಧಾನವು ನೈಜ-ಪ್ರಪಂಚದ ವಸ್ತುಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವ ನಮ್ಮ ಅನುಭವದಿಂದ ಬೆಂಬಲಿತವಾಗಿದೆ ಮತ್ತು ವರ್ಚುವಲ್ ಪರಿಸರದಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಚೆಸ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ, ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಬಳಸಿ ಬಳಕೆದಾರರು ತುಂಡನ್ನು ಎಳೆದ ಕೋಶವನ್ನು ನಿರ್ಧರಿಸಲು ತಾಂತ್ರಿಕವಾಗಿ ಸುಲಭವಾಗಿದೆ, ಏಕೆಂದರೆ ಬಿಡುಗಡೆ ಬಿಂದುವಿನ ನಿರ್ದೇಶಾಂಕಗಳಿಂದ ಸೆಲ್ ಸಂಖ್ಯೆಯನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುವ ಅಗತ್ಯವಿಲ್ಲ. ಈ ಕೆಲಸವನ್ನು ವರ್ಚುವಲ್ ಯಂತ್ರವು ವಹಿಸಿಕೊಳ್ಳುತ್ತದೆ.
ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ತಂತ್ರಜ್ಞಾನವನ್ನು ಬಳಸುವುದರಿಂದ ಕಡಿಮೆ ಪ್ರಯತ್ನದಿಂದ ಮೂರು ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸಲು ನನಗೆ ಅನುಮತಿಸುತ್ತದೆ:
ಕಾರ್ಯಗಳನ್ನು ವಿವರಿಸಲಾಗಿದೆ, ಅವುಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಪ್ರಾರಂಭಿಸೋಣ.
ಸ್ಪರ್ಶದಲ್ಲಿ ಇಮೇಜ್ ವ್ಯೂ ಪರ್ಯಾಯನನ್ನ ಎಲ್ಲಾ ಆಕಾರಗಳು ಇಮೇಜ್ ವ್ಯೂ ವಸ್ತುಗಳು. ದುರದೃಷ್ಟವಶಾತ್, ಆಂಡ್ರಾಯ್ಡ್‌ನಲ್ಲಿ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಅನುಷ್ಠಾನವು ವಸ್ತುವನ್ನು ಸ್ಪರ್ಶಿಸಿದಾಗ ಅದರ ಚಿತ್ರವನ್ನು ಬದಲಾಯಿಸಲು "ನೇರವಾಗಿ ಬಾಕ್ಸ್‌ನ ಹೊರಗೆ" ಅನುಮತಿಸುವುದಿಲ್ಲ ಎಂದು ಅದು ಬದಲಾಯಿತು. ಆದಾಗ್ಯೂ, API ಅನ್ನು ಬಳಸಿಕೊಂಡು ಈ ಕಾರ್ಯವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪರಿಹರಿಸಬಹುದು. ನಾವು ಹಲವಾರು ಸರಳ ಹಂತಗಳನ್ನು ನಿರ್ವಹಿಸಬೇಕಾಗಿದೆ:
ಈ ಕ್ರಿಯೆಗಳನ್ನು ImageView ಆಬ್ಜೆಕ್ಟ್‌ನ OnTouchListner ಹ್ಯಾಂಡ್ಲರ್‌ನಲ್ಲಿ ಅಳವಡಿಸಬೇಕು. ಇದನ್ನು ಮಾಡಲು, onTouch ವಿಧಾನವನ್ನು ಅತಿಕ್ರಮಿಸೋಣ:
@ ಓವರ್‌ರೈಡ್ ಪಬ್ಲಿಕ್ ಬೂಲಿಯನ್ ಆನ್‌ಟಚ್ (ವೀಕ್ಷಣೆ, ಮೋಷನ್ ಈವೆಂಟ್ ಮೋಷನ್ ಈವೆಂಟ್) (ಒಂದು ವೇಳೆ (ಮೋಷನ್ ಈವೆಂಟ್. ಗೆಟ್‌ಆಕ್ಷನ್() == ಮೋಷನ್ ಈವೆಂಟ್. ಎಸಿಷನ್_ಡೌನ್) ( ಕ್ಲಿಪ್‌ಡೇಟಾ ಕ್ಲಿಪ್‌ಡೇಟಾ= ಕ್ಲಿಪ್‌ಡೇಟಾ. ಹೊಸಪ್ಲೇನ್‌ಟೆಕ್ಸ್ಟ್ ("" , "" ) ; ವೀಕ್ಷಿಸಿ ನೋಡುಎಲ್ಲವೂ ತುಂಬಾ ಸರಳವಾಗಿದೆ. ಆದ್ದರಿಂದ, ನಾವು ಚಿತ್ರದ ಪರ್ಯಾಯವನ್ನು ವಿಂಗಡಿಸಿದ್ದೇವೆ, ಮುಂದಿನ ಕಾರ್ಯಕ್ಕೆ ಹೋಗೋಣ.
ಡ್ರ್ಯಾಗ್ ಡ್ರಾಪ್ ಕಾರ್ಯಕ್ಕಾಗಿ ಡ್ರ್ಯಾಗ್ ಪ್ರದೇಶವನ್ನು ಸೀಮಿತಗೊಳಿಸುವುದುಡ್ರ್ಯಾಗ್ ಪ್ರದೇಶವನ್ನು ಸೀಮಿತಗೊಳಿಸುವಲ್ಲಿ ಸಮಸ್ಯೆ ಇದೆ. ಪಾಯಿಂಟ್ ಎಂದರೆ ನೀವು ಬೋರ್ಡ್‌ನ ಹೊರಗೆ ತುಂಡನ್ನು ಬಿಡುಗಡೆ ಮಾಡಿದರೆ, ಡ್ರಾಪ್ ಈವೆಂಟ್ ಸಂಭವಿಸುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಬಳಕೆದಾರರು ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಖಾಲಿ ಜಾಗದಲ್ಲಿ ಬಿಡುಗಡೆ ಮಾಡಿದ್ದಾರೆ ಮತ್ತು ವಸ್ತುವು ಸಂವಹನ ಮಾಡಲು ಏನೂ ಇಲ್ಲ. ಪರಿಣಾಮವಾಗಿ, ಆಕೃತಿಯು ಅದರ ಮೂಲ ಸ್ಥಿತಿಗೆ ಹಿಂತಿರುಗುವುದಿಲ್ಲ ಮತ್ತು ಶಾಶ್ವತವಾಗಿ ಮರೆಮಾಡಲ್ಪಡುತ್ತದೆ. ನಾನು ದಸ್ತಾವೇಜನ್ನು ಓದಲು ಸಾಕಷ್ಟು ಸಮಯವನ್ನು ಕಳೆದಿದ್ದೇನೆ, ಆದರೆ ವಸ್ತುಗಳ ಡ್ರ್ಯಾಗ್ ಮತ್ತು ಡ್ರಾಪ್ ಪ್ರದೇಶವನ್ನು ಮಿತಿಗೊಳಿಸಲು ನನಗೆ ಇನ್ನೂ ಒಂದು ಮಾರ್ಗವನ್ನು ಕಂಡುಹಿಡಿಯಲಾಗಲಿಲ್ಲ. ಒಳನೋಟ ಇದ್ದಕ್ಕಿದ್ದಂತೆ ಬಂದಿತು. ನಾನು ಪ್ರದೇಶವನ್ನು ಮಿತಿಗೊಳಿಸುವ ಅಗತ್ಯವಿಲ್ಲ, ಬಳಕೆದಾರರು ಆಕಾರವನ್ನು ಸರಿಯಾಗಿ ಬಿಡುಗಡೆ ಮಾಡಿದ್ದಾರೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ನಾನು ತಿಳಿದುಕೊಳ್ಳಬೇಕು.
ಸರಿಯಾದ ಬಿಡುಗಡೆಯನ್ನು ನಿರ್ಧರಿಸುವುದು
Android ಡೆವಲಪರ್‌ಗಳ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ "ಡ್ರ್ಯಾಗ್ ಎಂಡ್ ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು" ವಿಭಾಗದಲ್ಲಿ ನನ್ನ ಪ್ರಶ್ನೆಗಳಿಗೆ ಉತ್ತರಗಳನ್ನು ನಾನು ಕಂಡುಕೊಂಡಿದ್ದೇನೆ. ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಮುಖ ಅಂಶಗಳು:
ಹಾಗಾಗಿ ನಾನು ACTION_DRAG_ENDED ಈವೆಂಟ್ ಅನ್ನು ಪ್ರತಿಬಂಧಿಸಬೇಕಾಗಿದೆ ಮತ್ತು getResult ವಿಧಾನಕ್ಕೆ ಕರೆ ಮಾಡಬೇಕಾಗಿದೆ. ಅದು ತಪ್ಪು ಎಂದು ಹಿಂತಿರುಗಿಸಿದರೆ, ಬಳಕೆದಾರರು ಬೋರ್ಡ್‌ನಿಂದ ತುಂಡನ್ನು ಎಳೆದಿದ್ದಾರೆ ಮತ್ತು ನಾನು ಇಮೇಜ್‌ವ್ಯೂ ಅನ್ನು ಗೋಚರ ಮೋಡ್‌ಗೆ ಹೊಂದಿಸಬೇಕಾಗಿದೆ.
@ ಸಾರ್ವಜನಿಕ boolean onDrag (ವೀಕ್ಷಣೆ, DragEvent dragEvent) ಅನ್ನು ಅತಿಕ್ರಮಿಸಿ (ಇಂಟ್ dragAction= dragEvent. getAction() ; dragView ವೀಕ್ಷಿಸಿ= (ವೀಕ್ಷಿಸಿ) dragEvent. getLocalState() ; ಇದ್ದರೆ (dragAction== DragEvent. ACTION_EDRA) ಬೇರೆ) ಒಂದು ವೇಳೆ (dragAction== DragEvent. ACTION_DRAG_ENTERED) (Dragable= true ; ) ಇಲ್ಲದಿದ್ದರೆ (dragAction== DragEvent. ACTION_DRAG_ENDED) (ಒಂದು ವೇಳೆ (dropEventNotHandled(dragEvent) ) (dragView. = setVisibility ;(ViBew. setVisibility) = DragEvent. ACTION_DROP& amp;& amp; ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದದನ್ನು ಒಳಗೊಂಡಿದೆ) (ಚೆಕ್‌ಫಾರ್ ವ್ಯಾಲಿಡ್‌ಮೂವ್ ((ಚೆಸ್‌ಬೋರ್ಡ್‌ಸ್ಕ್ವೇರ್‌ಲೇಔಟ್‌ವ್ಯೂ) ವೀಕ್ಷಣೆ, ಡ್ರ್ಯಾಗ್‌ವ್ಯೂ) ; ಡ್ರ್ಯಾಗ್‌ವೀವ್. ಸೆಟ್‌ವಿಸಿಬಿಲಿಟಿ(ವೀಕ್ಷಿ. ವೀಸಿಬಲ್)! dragEvent. getResult( ) ;)ಈಗ ಬಳಕೆದಾರರು ಆಕೃತಿಯನ್ನು ಎಲ್ಲಿಯಾದರೂ ಬಿಡುಗಡೆ ಮಾಡಬಹುದು ಮತ್ತು ಕೆಟ್ಟದ್ದೇನೂ ಆಗುವುದಿಲ್ಲ.
ಮಾನ್ಯ ಚಲನೆಗಳ ವ್ಯಾಖ್ಯಾನಲೇಖನದ ಕೊನೆಯ ಭಾಗವನ್ನು ಬಳಕೆದಾರರು ಮಾಡಲು ಪ್ರಯತ್ನಿಸುತ್ತಿರುವ ಕ್ರಮದ ಸಿಂಧುತ್ವವನ್ನು ಪರಿಶೀಲಿಸಲು ಮೀಸಲಿಡಲಾಗಿದೆ. ಈ ವಿಷಯವನ್ನು ವಿವರವಾಗಿ ಚರ್ಚಿಸುವ ಮೊದಲು, ನನ್ನ ಅಪ್ಲಿಕೇಶನ್‌ನ ರಚನೆಯನ್ನು ವಿವರಿಸುವ ಸಣ್ಣ ಟಿಪ್ಪಣಿಯನ್ನು ನಾನು ಮಾಡುತ್ತೇನೆ. ಚೆಸ್‌ಬೋರ್ಡ್ ಅನ್ನು ಟೇಬಲ್‌ಲೇಔಟ್‌ನಂತೆ ಪ್ರತಿನಿಧಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಕೋಶವು ಲೀನಿಯರ್‌ಲೇಔಟ್‌ನ ಮಗು ಮತ್ತು OnDragListener ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ.
ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪ್ರತಿ OnDragListener "ಮಧ್ಯವರ್ತಿ" ವಸ್ತುವನ್ನು ಸೂಚಿಸುತ್ತದೆ, ಇದು ಆಟದ ವಸ್ತುಗಳ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ನೋಡಿಕೊಳ್ಳುತ್ತದೆ ಮತ್ತು ಪ್ರಸ್ತುತ ಕೋಶದ ಸ್ಥಾನವನ್ನು ನೆನಪಿಸುತ್ತದೆ.
ಬಳಕೆದಾರರು ಕೋಶದ ಮೇಲೆ ತುಂಡನ್ನು ಎಳೆದಾಗ, ಈ ಕೆಳಗಿನ ಕ್ರಿಯೆಗಳು ಸಾಧ್ಯ:
ವಿವರಿಸಿದ ತರ್ಕವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಕೋಡ್ ಕೆಳಗೆ ಇದೆ
@ ಸಾರ್ವಜನಿಕ boolean onDrag (ವೀಕ್ಷಣೆ, DragEvent dragEvent) ಅನ್ನು ಅತಿಕ್ರಮಿಸಿ (ಇಂಟ್ dragAction= dragEvent. getAction() ; dragView ವೀಕ್ಷಿಸಿ= (ವೀಕ್ಷಿಸಿ) dragEvent. getLocalState() ; ಇದ್ದರೆ (dragAction== DragEvent. ACTION_EDRA) ಬೇರೆ) ಒಂದು ವೇಳೆ (dragAction== DragEvent. ACTION_DRAG_ENTERED) (Dragable= true ; ) ಇಲ್ಲದಿದ್ದರೆ (dragAction== DragEvent. ACTION_DRAG_ENDED) (ಒಂದು ವೇಳೆ (dropEventNotHandled(dragEvent) ) (dragView. = setVisibility ;(ViBew. setVisibility) = DragEvent.ACTION_DROP& amp;& amp; ಡ್ರ್ಯಾಗ್ ಮಾಡಬಹುದಾದಂತಹವುಗಳನ್ನು ಹೊಂದಿದೆ) (ಚೆಕ್‌ಫಾರ್ ವ್ಯಾಲಿಡ್‌ಮೂವ್((ಚೆಸ್‌ಬೋರ್ಡ್‌ಸ್ಕ್ವೇರ್‌ಲೇಔಟ್‌ವೀವ್) ವೀಕ್ಷಣೆ, ಡ್ರ್ಯಾಗ್‌ವ್ಯೂ) ; ಡ್ರ್ಯಾಗ್‌ವೀವ್. ಸೆಟ್‌ವಿಸಿಬಿಲಿಟಿ(ವೀಕ್ಷಿಸು. ಗೋಚರ) ; ) ನಿಜ ಹಿಂತಿರುಗಿ ; )ನೀವು ನೋಡುವಂತೆ, ಕ್ರಮವು ಮಾನ್ಯವಾಗಿದೆಯೇ ಅಥವಾ ಇಲ್ಲವೇ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ, ಇಮೇಜ್ ವ್ಯೂ ಅನ್ನು ಗೋಚರ ಸ್ಥಿತಿಗೆ ವರ್ಗಾಯಿಸಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು ಆಕಾರದ ಚಲನೆಯನ್ನು ನೋಡಬೇಕೆಂದು ನಾನು ಬಯಸುತ್ತೇನೆ. ಕೋಶವು ಲೇಔಟ್ ವ್ಯೂನ ಮಗು ಎಂದು ನಾನು ಮೊದಲೇ ಹೇಳಿದ್ದೇನೆ. ಇಮೇಜ್ ವ್ಯೂ ಅನ್ನು ಸೆಲ್‌ನಿಂದ ಸೆಲ್‌ಗೆ ಸರಿಸಲು ಸುಲಭವಾಗುವಂತೆ ಇದನ್ನು ಮಾಡಲಾಗುತ್ತದೆ. ಚೆಕ್‌ಫಾರ್‌ವ್ಯಾಲಿಡ್‌ಮೂವ್ ವಿಧಾನದ ಕೋಡ್ ಕೆಳಗೆ ಇದೆ, ಇದು ಇಮೇಜ್‌ವ್ಯೂ ಹೇಗೆ ಚಲಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.
ಖಾಸಗಿ ಅನೂರ್ಜಿತ ಚೆಕ್ ಫಾರ್ ವ್ಯಾಲಿಡ್ ಮೂವ್ (ಚೆಸ್ ಬೋರ್ಡ್ ಸ್ಕ್ವೇರ್ ಲೇಔಟ್ ವೀಕ್ಷಣೆ ವೀಕ್ಷಣೆ, ಡ್ರ್ಯಾಗ್ ವ್ಯೂ ವೀಕ್ಷಿಸಿ) ( ವೇಳೆ (ಮಧ್ಯವರ್ತಿ. ವ್ಯಾಲಿಡ್ ಮೂವ್ (ವೀಕ್ಷಣೆ) ) ( ವ್ಯೂಗ್ರೂಪ್ ಮಾಲೀಕರು = (ವೀವ್ ಗ್ರೂಪ್) ಡ್ರ್ಯಾಗ್ ವ್ಯೂ. ಗೆಟ್ ಪೇರೆಂಟ್ () ; ಮಾಲೀಕರು. ರಿಮೂವ್ ವೀವ್ ; (ಗ್ರಾವಿಟಿ. ಸೆಂಟರ್) ; ವೀಕ್ಷಿಸಿ. ಶೋಆಸ್ಲ್ಯಾಂಡೆಡ್ () ; ಮಧ್ಯವರ್ತಿ. ಹ್ಯಾಂಡಲ್ ಮೂವ್ (ವೀಕ್ಷಣೆ) ; ) )ನಿಮ್ಮ ಸ್ವಂತ ಯೋಜನೆಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ ಈ ಲೇಖನವು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ.
