Ensure that the assistant stays beneath the cursor while moving it

Question

Ensure that the assistant stays beneath the cursor while moving it

I am currently working on creating a functionality similar to the 'Sortable Widget', but due to some constraints, I cannot use the premade widget. Instead, I am trying to replicate its features using draggable and droppable elements:

$(".Element").draggable({
    helper: 'original',
    drag: function(event, ui) {

        ElementWidth = $(this).outerWidth(true);
        if($(this).prev().length){
            LeftElementWidth = $(this).prev().outerWidth(true);
            LeftElementLeftOffset = $(this).prev().offset().left;
            if(parseFloat(ui.offset.left+(ElementWidth/2)) < parseFloat(LeftElementLeftOffset+(LeftElementWidth/2)){
                $(this).prev().before($(this));
            }
        }

        if($(this).next().length){
            RightElementWidth = $(this).next().outerWidth(true);
            RightElementLeftOffset = $(this).next().offset().left;
            if(parseFloat(ui.offset.left+(ElementWidth/2)) > parseFloat(RightElementLeftOffset+(RightElementWidth/2)){
                $(this).next().after($(this));
            }
        }
    }
});

$("#Container").droppable({ accept: '.Element' });

The implementation works well, however, there is an issue where the draggable-helper does not stay under the mouse cursor when moving the element to the next position. You can see the problem in action by checking out this fiddle:

http://jsfiddle.net/5qFhg/15/

If you try sorting the green boxes, you'll notice the discrepancy. Is there a way to keep the helper in the correct position?

javascript jquery html css jquery-ui

Answer 1

Answer №1

Check out this link for more information.

Does this align with your needs? Are you open to utilizing knockout? Unfortunately, I am unable to leave comments as my reputation is under 50.

<a href="#" data-bind="text: name, click: function() { viewModel.selectTask($data); },     visible: $data !== viewModel.selectedTask()"></a>
<input data-bind="value: name, visibleAndSelect: $data === viewModel.selectedTask(), event: { blur: function() { viewModel.selectTask(''); } }" />

Try using the parent and previous location to replicate the desired functionality.

ko.bindingHandlers.sortableList = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
    $(element).data("sortList", valueAccessor()); //attach meta-data
    $(element).sortable({
        start: function(event, ui) {
            //track the original position of the element
            var parent = ui.item.parent();
            var prev = ui.item.prev();
            //create a function to move it back (if it has a prev sibling, insert after it, otherwise put it at the beginning)
            ui.item.moveItemBack = prev.length ? function() { ui.item.insertAfter(prev); } : function() { parent.prepend(ui.item); };
        },
        update: function(event, ui) {
            var item = ui.item.data("sortItem");
            if (item) {
                //identify parents
                var originalParent = ui.item.data("parentList");
                var newParent = ui.item.parent().data("sortList");

                //figure out its new position
                var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);

                if (position >= 0) {
                    //move the element back to its original position and let KO handle adding it to the new parent
                    if (originalParent !== newParent) {
                        ui.item.moveItemBack();
                    }

                    //place item in the proper position
                    newParent.remove(item);
                    newParent.splice(position, 0, item);
                }
            }
        },
        connectWith: '.container'
    });
}

Would you like the divs to be displayed next to each other?

Answer 2

Check out this link for more information.

Does this align with your needs? Are you open to utilizing knockout? Unfortunately, I am unable to leave comments as my reputation is under 50.

<a href="#" data-bind="text: name, click: function() { viewModel.selectTask($data); },     visible: $data !== viewModel.selectedTask()"></a>
<input data-bind="value: name, visibleAndSelect: $data === viewModel.selectedTask(), event: { blur: function() { viewModel.selectTask(''); } }" />

Try using the parent and previous location to replicate the desired functionality.

ko.bindingHandlers.sortableList = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
    $(element).data("sortList", valueAccessor()); //attach meta-data
    $(element).sortable({
        start: function(event, ui) {
            //track the original position of the element
            var parent = ui.item.parent();
            var prev = ui.item.prev();
            //create a function to move it back (if it has a prev sibling, insert after it, otherwise put it at the beginning)
            ui.item.moveItemBack = prev.length ? function() { ui.item.insertAfter(prev); } : function() { parent.prepend(ui.item); };
        },
        update: function(event, ui) {
            var item = ui.item.data("sortItem");
            if (item) {
                //identify parents
                var originalParent = ui.item.data("parentList");
                var newParent = ui.item.parent().data("sortList");

                //figure out its new position
                var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);

                if (position >= 0) {
                    //move the element back to its original position and let KO handle adding it to the new parent
                    if (originalParent !== newParent) {
                        ui.item.moveItemBack();
                    }

                    //place item in the proper position
                    newParent.remove(item);
                    newParent.splice(position, 0, item);
                }
            }
        },
        connectWith: '.container'
    });
}

Would you like the divs to be displayed next to each other?

Ensure that the assistant stays beneath the cursor while moving it

Answer №1

Similar questions

Unable to locate the value property of a null object

Looking to automatically dismiss a tooltip on mobile devices a few seconds after it's tapped

Exploring the assortment of reactions post-awaitReaction in node.js

next.js users may encounter a problem with react-table not rendering correctly

Error encountered while running a mounted hook in Vue.js that was not properly handled

What steps can I take to ensure a JavaScript loading image is displayed until the entire page has finished loading?

Prevent the Icon in Material UI from simultaneously changing

Challenges with managing VueJS methods and understanding the component lifecycle

Pressing the enter key causes duplicate input fields in Internet Explorer

Encountering a mistake due to the anticipated atom not being found at the specified

Error occurred due to a reference to a function being called before it was

Exclude a specific tag from a div in JavaScript

Exploring the concept of next middle-ware within the realm of Express.js and Sail.js controllers

Exploring the power of Nestjs EventEmitter Module in combination with Serverless functions through the implementation of Async

What methods can be used to accomplish this effect using CSS and/or Javascript?

The landscape orientation causes the button bar to overflow by 100% of the body height

Having trouble with AES decryption on my nodeJS/ExpressJS server backend

What is the best way to position a rectangle on top of a div that has been rendered using

How can I search multiple columns in Supabase using JavaScript for full text search functionality?

Connecting the value of one input to influence another input