Home/ Questions/Q 6746791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T12:21:52+00:00

I’m trying to emulate the behavior of this drag n drop found here How

  • 0

I’m trying to emulate the behavior of this drag n drop found here

How do I change the following code to get the mouse over effect with the rectangle outline? Also is it possible to have it sortable like the example above?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
  .demo { width: 320px }

  ul { width: 200px; height: 150px; padding: 2em; margin: 10px; color: black; list-style: none; }
  ul li { border: solid 1px red; cursor: move; }

  #draggable { border: solid 1px #ccc;}
  #droppable { border: solid 1px #ddd; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {

var selectedClass = 'ui-state-highlight',
    clickDelay = 600,
    // click time (milliseconds)
    lastClick, diffClick; // timestamps

$("#draggable li")
// Script to deferentiate a click from a mousedown for drag event
.bind('mousedown mouseup', function(e) {
    if (e.type == "mousedown") {
        lastClick = e.timeStamp; // get mousedown time
    } else {
        diffClick = e.timeStamp - lastClick;
        if (diffClick < clickDelay) {
            // add selected class to group draggable objects
            $(this).toggleClass(selectedClass);
        }
    }
})
.draggable({
    revertDuration: 10,
    // grouped items animate separately, so leave this number low
    containment: '.demo',
    start: function(e, ui) {
        ui.helper.addClass(selectedClass);
    },
    stop: function(e, ui) {
        // reset group positions
        $('.' + selectedClass).css({
            top: 0,
            left: 0
        });
    },
    drag: function(e, ui) {
        // set selected group position to main dragged object
        // this works because the position is relative to the starting position
        $('.' + selectedClass).css({
            top: ui.position.top,
            left: ui.position.left
        });
    }
});

$("#droppable, #draggable").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",

    drop: function(e, ui) {
        $('.' + selectedClass).appendTo($(this)).add(ui.draggable)
        .removeClass(selectedClass).css({
            top: 0,
            left: 0
        });
    }
});
});
</script>   

</head>
<body>

<div class="demo">
    <p>Available items</p>    
        <ul id="draggable">
        <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

    <p>Drop Zone</p>
    <ul id="droppable">
    </ul>

</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The link you posted has an example created without jQuery, and I have done the same several times myself with a slightly different approach.

    I’m sure there is an easier way in jQuery UI draggable, and the documentation would be the first place to look.

    However, to show how it’s done in regular javacript without a library, wich should probably work with jQuery as well, as it uses regular event listeners, you would do something like this:

    var dropzone;  
    dropzone = document.getElementById("dropzone");  
    dropzone.addEventListener("dragenter", dragin, false);
    dropzone.addEventListener("dragleave", dragout, false);
    dropzone.addEventListener("drop", drop, false);

    This binds the events to functions, that would look something like this:

    function drop(e) {
    //do something when dropped
    e.stopprop, preventdefault etc.
}
function dragin(e) {
    //do something when dragged in
    e.stop stuff
}
function dragout(e) {
    //do something when dragged out, usually remove the stuff you did above
    e.stop stuff
}

    This is the way it’s normally done, and just as mouseenter and mouseleave, the drag event listeners should work with jQuery, and you could probably use .bind(); to bind them to some sort of action in exactly the same way as the mouse events, allthough I have never tested this as I always do this without jQuery.

    • 0