Functionalities

17 Jul 201712 minutes to read

Delay Drag

You can set the required distance the mouse should travel in order to initiate a drag using distance property.

HTML

<div id="draggable-container">
       <div id="draggable-item">Drag</div>
    </div>
    <style>
      #draggable-container {
        margin: 10px auto;
        width: 200px;
        height: 200px;
        background: #eee;
        padding: 10px;
        border: 1px solid black;
        }

     #draggable-item {
        width: 30px;
        height: 20px;
        padding: 10px;
        border: 1px solid black;
        margin: 5px;
        background: #666;
        color: white;
        }
    </style>

JAVASCRIPT

$(function () {
	   $("#draggable-item").ejDraggable({
	       distance:5,
	        helper: function (event) {
	           return $(event.element);
               }
			});
         });

Cursor Distance

You can set the offset for dragging helper with respect to the mouse cursor using cursorAt property.

HTML

<div id="leftContainer">
        <!-- draggable element-->
        <div id="dragElement" class="drag">
            <span>Drag Me</span>
        </div>
    </div>

    <div id="rightContainer">
        <!-- droppable target element-->
        <div id="dropContainer" class="drop">
            <span>Drop Here</span>
        </div>
    </div>

JAVASCRIPT

jQuery(function ($){
            $("#dragElement").ejDraggable({
                helper: function (event) {
                    return $(event.element); // Object of the Draggable element.
                },
	            cursorAt:{ top: 0, left: 0 },
			
            });

            $("#dropContainer").ejDroppable({
                // Drop event for change the container text while dropping element.
                drop: function (event, ui) {
                    event.dropTarget.text("Element Dropped..!");
                }
				
            });
        });

Drag On Tap Hold

In order to drag an element during tapHold in mobile devices set the dragOnTaphold to true

JAVASCRIPT

jQuery(function ($){
            $("#dragElement").ejDraggable({
                helper: function (event) {
                    return $(event.element); // Object of the Draggable element.
                },
	            dragOnTaphold:true
			
            });

        });

Restrict Drop

You can group draggable and droppable elements using scope property. You can define a scope value for both drag and drop elements and the elements will be dragged and dropped based on that.The draggable element with a different scope value will not be accepted by the droppable element

The below code illustrates how to use scope for grouping elements

HTML

<div id="area">
        <div class="scope1"><span class="text1">Same scope</span></div>
        <div class="scope2"><span class="text2">Different scope</span></div>
        <div id="draggable"><span class="text3">Drag</span></div>
    </div>
    <style>
        #draggable {
            width: 55px;
            height: 26px;
            float: right;
            line-height: 27px;
            font-size: 11px;
            color: white;
            display: inline-block;
            background-color: #666;
        }

        .scope1, .scope2 {
            font-size: 11px;
            width: 70px;
            height: 80px;
            margin: 10px;
        }

        .scope1 {
            background-color: #eee;
            margin-top: 10px;
        }

        .scope2 {
            background-color: lightgray;
        }

        #area {
            width: 200px;
            height: 240px;
            border: grey 1px solid;
        }

        .text1 {
            margin-top: 22px;
            padding: 6px;
        }

        .text2 {
            margin-left: 2px;
            margin-top: 10px;
            padding: 11px;
        }

        .text1, .text2 {
            font-size: 12px;
            text-align: center;
            display: inline-block;
        }

        .text3 {
            font-size: 11px;
            color: white;
            line-height: 26px;
            margin-left: 16px;
            display: inline-block;
        }

        body {
            font-family: -webkit-pictograph;
        }
    
		  
	</style>

JAVASCRIPT

$("#draggable").ejDraggable({
        helper: function (event) {
            return $(event.element);
        },
        drag: function (event) {
            event.target.textContent = "Dragging";
            $(".text3").css("margin-left", "7px");
            $("#draggable").css("background", "grey");
        },
        scope: "scope1"
    });

    $(".scope1").ejDroppable({
        scope: "scope1",
        over: function (event, ui) {
            $(".text1")[0].innerText = "You can drop here"
        },
        drop: function (event, ui) {
            event.dropTarget.text("");
            $(".text3")[0].innerText = "Dropped!"
            $("#draggable").css("color", "white");
            $("#draggable").css("background", "#666");
        }
    });

    $(".scope2").ejDroppable({
        over: function (event, ui) {
            $(".text2")[0].innerText = "You can't drop here"
        }
    });

Before Drag:

During Drag:

When Drag element is over the non-scope element

When Drag element is over the scope element

After Drop: