如何将一个元素从一个div中删除到另一个div

Question

我有以下div

<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>

我需要取出灵感类别列表列表ul并将其放入另一个带有CSS转换的div中。因此它向下滑动并从div2的顶部锁定到位置80px。

如何使用JQUERY做到这一点？

Answer 1

为什么不使用拖动效果而不是css过渡？
 如果您愿意，可以为要移动它的每个元素添加可拖动效果 你可以使用下面链接中的dragable.js 然后在javascript代码中你应该设置$ (".inspiration-category-list").draggable ()
然后将其拖放到任何div元素

中，而不是使用css过渡

/*--------------------------------------------------------------
Draggable
alternative to jQuery UI’s draggable
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);
                            //$("#log").text("x: " + e.pageX + "; y: " + e.pageY);

                            if (firstMove) {
                                firstMove = false;
                                $dragged
                                    .css({
                                        'z-index': stack, 'transform': 'scale(1.1)', 'transition': 'transform .3s',
                                        'bottom': 'auto', 'right': 'auto'
                                    });
                                /*.find('a').one('click.draggable', function(e) {
                                    e.preventDefault();
                                    e.stopImmediatePropagation();
                                    $("#log").text("link: click prevented " + stack);
                                });*/
                                var $target = $(e.target);
                                if ($target.is('a')) {
                                    $preventClick = $target;
                                    $target.one('click.draggable', function (e) {
                                        e.preventDefault();
                                        e.stopImmediatePropagation();
                                        //$("#log").text("link: click prevented " + stack);
                                    });
                                } else if ($dragged.is('a')) {
                                    $preventClick = $dragged;
                                    $dragged.one('click.draggable', function (e) {
                                        e.preventDefault();
                                        e.stopImmediatePropagation();
                                        //$("#log").text("dragged: click prevented " + stack);
                                    });
                                }
                            }
                            $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();
                                //$("#log").text("left :" + startOffset.left + "; top: " + startOffset.top
                                //               + "; newLeft: " + endOffset.left + "; newTop: " + endOffset.top);
                                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);