Guide on moving a single item from one div to another

Question

Guide on moving a single item from one div to another

Here is a div that I need to modify:

<div class="npwfu-inspiration">
    <div class="npwfu-inspiration-inner">
        <h1>Looking for inspiration?</h1>

        <p>Pick a category to see examples of what you can create with Spark.</p>
        <ul class="inspiration-category-list"></ul>
    </div>
</div>
<div class="div2"></div>

I want to move the "inspiration-category-list" ul into another div called "div2" using CSS transition. It should slide down and stay positioned 80px from the top within "div2".

Can anyone help me achieve this effect using jQuery?

javascript jquery css

Answer 1

Answer №1

Have you considered using drag effect instead of CSS transition?
If you are interested, you can implement draggable functionality to any element you wish to move by utilizing dragable.js from the provided link. In your JavaScript code, simply set $

(".inspiration-category-list").draggable ()

Rather than relying on CSS transitions, you can smoothly drag and drop the elements into any desired div container.

/*--------------------------------------------------------------
Draggable
An alternative to jQuery UI’s draggable functionality
Based on comments from: http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
Usage example: $('.post-thumbnail, article header').draggable();
--------------------------------------------------------------*/
(function ($) {
    if (!jQuery().draggable) {
        $.fn.draggable = function () {
            var _fixMobileEvent = function (e) {
                if (e.originalEvent && e.originalEvent.targetTouches && e.originalEvent.targetTouches[0]) {
                    var t = e.originalEvent.targetTouches[0];
                    e.pageX = t.clientX;
                    e.pageY = t.clientY;
                    return true;
                } else {
                    return false;
                }
            };
            this
                .css('cursor', 'move')
                .on('mousedown touchstart', function (e) {
                    _fixMobileEvent(e);
                    var $dragged = $(this);

                    var startOffset = $dragged.offset();
                    var x = startOffset.left - e.pageX,
                        y = startOffset.top - e.pageY,
                        z = $dragged.css('z-index');

                    if (!$.fn.draggable.stack) {
                        $.fn.draggable.stack = 999;
                    }
                    stack = $.fn.draggable.stack;
                    var firstMove = true;
                    var $preventClick = null;

                    $(window)
                        .on('mousemove.draggable touchmove.draggable', function (e) {
                            _fixMobileEvent(e);

                            if (firstMove) {
                                firstMove = false;
                                $dragged
                                    .css({
                                        'z-index': stack, 'transform': 'scale(1.1)', 'transition': 'transform .3s',
                                        'bottom': 'auto', 'right': 'auto'
                                    });

                                var $target = $(e.target);
                                if ($target.is('a')) {
                                    $preventClick = $target;
                                    $target.one('click.draggable', function (e) {
                                        e.preventDefault();
                                        e.stopImmediatePropagation();
                                    });
                                } else if ($dragged.is('a')) {
                                    $preventClick = $dragged;
                                    $dragged.one('click.draggable', function (e) {
                                        e.preventDefault();
                                        e.stopImmediatePropagation();
                                    });
                                }
                            }
                            $dragged.offset({
                                left: x + e.pageX,
                                top: y + e.pageY
                            });
                            e.preventDefault();
                        })
                        .one('mouseup touchend touchcancel', function () {
                            $(this).off('mousemove.draggable touchmove.draggable');
                            $dragged.css({ 'z-index': z, 'transform': 'scale(1)' })
                            $.fn.draggable.stack++;

                            if (_fixMobileEvent(e)) {
                                if ($preventClick) $preventClick.off('click.draggable');
                                var endOffset = $dragged.offset();

                                if (Math.abs(endOffset.left - startOffset.left) <= 3
                                        && Math.abs(endOffset.top - startOffset.top) <= 3) {

                                    if ($preventClick) {
                                        $preventClick[0].click();
                                    } else {
                                        var $target = $(e.target);
                                        if ($target.is('a')) {
                                            e.target.click();
                                        } else if ($dragged.is('a')) {
                                            $dragged[0].click();
                                        }
                                    }
                                }
                            }
                        });

                    e.preventDefault();
                });
            return this;
        };
    }
})(jQuery);

Answer 2

Have you considered using drag effect instead of CSS transition?
If you are interested, you can implement draggable functionality to any element you wish to move by utilizing dragable.js from the provided link. In your JavaScript code, simply set $

(".inspiration-category-list").draggable ()

Rather than relying on CSS transitions, you can smoothly drag and drop the elements into any desired div container.

/*--------------------------------------------------------------
Draggable
An alternative to jQuery UI’s draggable functionality
Based on comments from: http://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
Usage example: $('.post-thumbnail, article header').draggable();
--------------------------------------------------------------*/
(function ($) {
    if (!jQuery().draggable) {
        $.fn.draggable = function () {
            var _fixMobileEvent = function (e) {
                if (e.originalEvent && e.originalEvent.targetTouches && e.originalEvent.targetTouches[0]) {
                    var t = e.originalEvent.targetTouches[0];
                    e.pageX = t.clientX;
                    e.pageY = t.clientY;
                    return true;
                } else {
                    return false;
                }
            };
            this
                .css('cursor', 'move')
                .on('mousedown touchstart', function (e) {
                    _fixMobileEvent(e);
                    var $dragged = $(this);

                    var startOffset = $dragged.offset();
                    var x = startOffset.left - e.pageX,
                        y = startOffset.top - e.pageY,
                        z = $dragged.css('z-index');

                    if (!$.fn.draggable.stack) {
                        $.fn.draggable.stack = 999;
                    }
                    stack = $.fn.draggable.stack;
                    var firstMove = true;
                    var $preventClick = null;

                    $(window)
                        .on('mousemove.draggable touchmove.draggable', function (e) {
                            _fixMobileEvent(e);

                            if (firstMove) {
                                firstMove = false;
                                $dragged
                                    .css({
                                        'z-index': stack, 'transform': 'scale(1.1)', 'transition': 'transform .3s',
                                        'bottom': 'auto', 'right': 'auto'
                                    });

                                var $target = $(e.target);
                                if ($target.is('a')) {
                                    $preventClick = $target;
                                    $target.one('click.draggable', function (e) {
                                        e.preventDefault();
                                        e.stopImmediatePropagation();
                                    });
                                } else if ($dragged.is('a')) {
                                    $preventClick = $dragged;
                                    $dragged.one('click.draggable', function (e) {
                                        e.preventDefault();
                                        e.stopImmediatePropagation();
                                    });
                                }
                            }
                            $dragged.offset({
                                left: x + e.pageX,
                                top: y + e.pageY
                            });
                            e.preventDefault();
                        })
                        .one('mouseup touchend touchcancel', function () {
                            $(this).off('mousemove.draggable touchmove.draggable');
                            $dragged.css({ 'z-index': z, 'transform': 'scale(1)' })
                            $.fn.draggable.stack++;

                            if (_fixMobileEvent(e)) {
                                if ($preventClick) $preventClick.off('click.draggable');
                                var endOffset = $dragged.offset();

                                if (Math.abs(endOffset.left - startOffset.left) <= 3
                                        && Math.abs(endOffset.top - startOffset.top) <= 3) {

                                    if ($preventClick) {
                                        $preventClick[0].click();
                                    } else {
                                        var $target = $(e.target);
                                        if ($target.is('a')) {
                                            e.target.click();
                                        } else if ($dragged.is('a')) {
                                            $dragged[0].click();
                                        }
                                    }
                                }
                            }
                        });

                    e.preventDefault();
                });
            return this;
        };
    }
})(jQuery);

Guide on moving a single item from one div to another

Answer №1

Similar questions

The Jquery ajax function is functional on a local environment, but fails to work when

Is it possible to integrate Processing JS on top of an HTML element?

Exploring the functionalities of the execPopulate() method

Is it possible to redirect any web traffic using an authentication script?

When an ajax post is in progress, jQuery blocks functions from running

How to trigger a submit action on a different page from an iframe using PHP

How about this: "Can you turn a picture into text with just one click?"

What is the best method for saving MESH in a global variable following the use of OBJLoader in ThreeJS instead of Object3D?

Only compress the initial layer of the array

What is the best way to remove all elements in jQuery?

Angular Flot Chart Resizing: A Guide to Dynamic Chart S

What is the best way to use the Object3D.lookAt() function to align an ExtrudeGeometry face with an object?

Issue encountered when trying to add data into MySQL database

Using React JS to iterate over an array and generate a new div for every 3 items

Step-by-step guide to building a personalized entity in ng-admin

Dynamic Wordpress content with ajax loading

Communication through Collaboration Diagrams

AngularJS is not immediately responsive to changes in $window.document.visibilityState

Steer clear of 405 errors by implementing AJAX in combination with Flask and JINJA templ

Default values for CSS variables: only apply if the variable has not been previously defined