איך לאפשר לגולשים לגרור אלמנטים שונים באתר

מעונינים לתת לגושלים אפשרות לגרור דברים באתר שלכם?
הנה קוד בסיסי שיאפשר לגולשים לגרור אלמנטים, איזורים וכד’.

פשוט לתת לווידג’ט/קונטיינור את הקלאס my-draggable
ולהוסיף את הקוד הבא,

				
					<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
jQuery( document ).ready( function ( $ ) {
$( ".my-draggable" ).draggable();
});
</script>

<style>
    .my-draggable{
        cursor: grab;
    }
</style>
				
			

בשביל שבמובייל זה יעבוד בטאצ’, צריך להוסיף קצת לקוד,

				
					<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);</script>
<script>
jQuery( document ).ready( function ( $ ) {
$( ".my-draggable" ).draggable();
});
</script>

<style>
    .my-draggable{
        cursor: grab;
    }
</style>
				
			

9 תגובות

  1. חזק ביותר!!!!!! אלוף!!!!!!!! עזר לי מאוד….!!!!!!!!!!!
    תמשיך כך להביא לנו תוכן איכותי וחזק, אני משתמשת המון בבלוג שלך….

  2. וואו!!! זה מדהים!! עובד מקסים!!
    תודה רבה!!!
    איך אפשר שהוידג’ט יוכל להיגרר רק בתוך הקונטיינר שלו (שטח מסוים) ולא בכל האתר?
    אשמח לדעת, תודה!!

כתיבת תגובה

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

פעם בשבוע אני שולח ניוזלטר
עם כל המאמרים החדשים באתר
מעניין אותך?