Detect jquery ondrag event

Question

Detect jquery ondrag event

Asked 5 years, 2 months ago

Viewed 66 times

1

I am working with drag and drop as in the example on the jquery site: https://jqueryui.com/sortable/#connect-lists

I took the same logic of the example script and applied it to an HTML page, where I can change the order of the contents (div content) inside the body, but I would like to decrease the size of the div to facilitate the positioning of the element, thought to detect the event wavrag and so decrease the element, but wanted to see a dynamic way to call the event, that the event is subject to any daughter tag of the body.

Search by draggable, ondragend, ondragstart, ondrag, ondragenter, ondragleave and similar. The first time I implemented it took a little work, in the following times was already more of good.

– Leonardo Getulio

2019/09/06 at 22:04

1 answer

Browser other questions tagged html jquery javascript-events

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-09-06T22:16:35+00:00

Maybe this is not the best way, but in the documentation has the reference of sortable https://api.jqueryui.com/sortable/#Event-Activate

It would be something like: $( ".selector" ).on( "sortactivate", function( event, ui ) {} );

But I did taking the auxiliary class helper by CSS

Note that you do not apply the class in click only in the drag

What I’ve done is that when the element is in the state sortable the jquery.ui applies a class to it called ui-sortable-helper, I went to CSS and put a style in this class and it worked as I wanted

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Sortable - Connect lists</title>
<!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> -->
<style>
    #sortable1,
    #sortable2 {
        border: 1px solid #eee;
        width: 142px;
        min-height: 20px;
        list-style-type: none;
        margin: 0;
        padding: 5px 0 0 0;
        float: left;
        margin-right: 10px;
    }

    #sortable1 li,
    #sortable2 li {
        margin: 0 5px 5px 5px;
        padding: 5px;
        font-size: 1.2em;
        width: 120px;
    }

    .ui-sortable-helper {
        background-color: red;
        transform: scale(0.7)
    }

</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
    $("#sortable1").sortable()
})

</script>
</head>

<body>

    <ul id="sortable1">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</body>

</html>