handle jquery drag and resize look – 2

14 בספטמבר 2013

תגיות: , ,
2 תגובות

בהמשך לפוסט על שליטה בהתנהגות של גרירה והרחבה של jQuery, בפוסט זה נראה כיצד ניתן להגדיר שבזמן לחיצה על ctrl יהיה רק גרירה ולא הרחבה.

כזכור בפוסט הקודם הראיתי כיצד ניתן לקבוע גודל וצבע עבור השוליים של ההרחבה במידה ומאפשרים גם גרירה – כך שלמשתמש יהיה ברור היכן הוא גורר והיכן הוא מרחיב.

הבעייה שיכולה להיווצר שלפעמים השטח מאוד קטן לגרירה, ולכן ניתן להחליט שבמידה והמשתמש לוחץ על ctrl יהיה רק גרירה, הקוד יראה כך:

Code Snippet
<style>
    div {
        width: 200px;
        height: 100px;
        background-color: #fc4444;
    }

        div .ui-resizable-n {
            background-color: #b2b2b2;
            top: 0px;
            height: 15px;
        }

        div .ui-resizable-s {
            background-color: #b2b2b2;
            bottom: 0px;
            height: 15px;
        }

        div .ui-resizable-w {
            background-color: #b2b2b2;
            left: 0px;
            height: 100%;
            width: 15px;
        }

        div .ui-resizable-e {
            background-color: #b2b2b2;
            right: 0px;
            height: 100%;
            width: 15px;
        }

        div [class^="ui-resizable"].drag {
            display: none;
            width: 0px;
            height: 0px;
        }
</style>

על הדוגמה מהפוסט הקודם התווסף הפעם הגדרה ב – css, (בסוף) שכל אלמנט של גרירה אם יש לו class של drag לא יראו אותו (כך נעלים את האייקון של הגרירה)

כעת ה – js

Code Snippet
<script>
    $(function () {
        $('div')
        .draggable({
            drag: function (event, ui) {
                changeFunctionality(event, ui.helper);
            }
        }).resizable({
            autoHide: true,
            handles: "n, e, s, w",
            start: function (event, ui) {
                changeFunctionality(event, ui.helper);
            },
            resize: function (event, ui) {
                changeFunctionality(event, ui.helper);
            }
        });

        function changeFunctionality(event, jquery) {
            if (event.ctrlKey) {
                jquery.find("*[class^='ui-resizable']").addClass('drag');
            }
            else {
                jquery.find("*[class^='ui-resizable']").removeClass('drag');
            }
        }
    });
</script>

הפעם נירשם לאירוע drag, resize ובהם נפנה לפונקציה הבודקת עם ctrl לחוץ או לא, ולפי זה מחליטה האם להוסיף או להסיר את המחלקה.

כעת המשתמש יכול בקלות להחליט האם לתת מרחב גם לגרירה וגם להרחבה או לאפשר רק גרירה.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

2 תגובות

  1. עידן14 בספטמבר 2013 ב 20:16

    מצחיק שדוס שולח פוסטרים ביום כיפור

    הגב
  2. Shlomo15 בספטמבר 2013 ב 17:30

    לא אשמתי שהשעות של הבלוגים לא מעודכן, שלחתי את הפוסט כארבע-חמש שעות אחרי צאת החג

    שלמה

    הגב