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

Angular 8: ISSUE TypeError: Unable to access the 'invalid' property of an undefined variable

Combining two objects with JQuery while preserving all their properties

Using JavaScript to retrieve data from a JSON file and showcase it on a jQuery mobile webpage

Using Selenium 2 to dynamically insert CSS styles into the currently visible webpage

When utilizing an object as state in React, the `setState` function will only set

Most effective method to retrieve yesterday's data

Enhancing Promises.all with extra parameters

Surrounding the text with background color

How can I combine various array values of equal length using a delimiter to create one final array?

AJAX Post Request Function without Form That Does Not Reset

What is the best way to line up a number and text using CSS?

I'm trying to set an object value for this select element, and while I have managed to do so, I am struggling to display the title of the selected object. Can anyone help me

Issue in IE with click event not firing from parent page

Ways to adjust the distance between logo and slider

The React app I've been working on has a tendency to unexpectedly crash when reloading the code from time

Error: Loop Program Encountered Unexpected Token Syntax

Tips for retrieving all values included in the <tr> tags within an html <table>

Clearing up memory in ThreeJS application

How to apply unique styles to multiple elements with the same class using jQuery?

Displaying or concealing dropdown menus based on a selected option