how to drop one element from one div to another

Question

I have the following 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>

I need to take out the inspiration-category-list list ul and drop it into another div with a CSS transition. So it slides down and locks to position 80px from the top in div2.

How can I do this using JQUERY?

Answer 1

why you do not use drag effect instead of css transition?
if you would like you can add draggable effect to every element that you want to move it
you can use dragable.js from link below then in javascript code you should set $ (".inspiration-category-list").draggable ()
then instead of using css transition just drag it and drop it in any div element

 /*-------------------------------------------------------------- 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);