JavaScript DragDrop

Set the appendTo property of the jqxDragDrop. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<body class='default'>
    <div id="shop" class="draggable-demo-shop jqx-rc-all">
        <div id="catalog" class="draggable-demo-catalog jqx-rc-all"></div>
        <div class="draggable-demo-cart-wrapper jqx-rc-all">
            <div class="draggable-demo-title jqx-rc-t">Shopping Cart</div>
                <div id='cart' class="draggable-demo-cart jqx-rc-all">
                    <div id="jqxgrid"></div>
                </div>
                <div class="draggable-demo-total">Total: <strong><span id="total">$ 0</span></strong></div>
            </div>
        <div style="clear: both;"></div>
    </div>
</body>

CSS

.draggable-demo-cart
        {
            border: 2px dashed #aaa;
            padding: 5px;
            width: 232px;
            margin: auto;
        }
        .draggable-demo-shop 
        {
            border: 1px solid #666;
            width: 665px;
            padding: 5px;
        }
        .draggable-demo-catalog
        {
            position: relative;
            width: 397px;
            border: 1px solid #bbb;
            height: 457px;
            float: left;
            overflow: scroll;
        }
        .draggable-demo-product-image
        {
            width: 150px;
        }
        .draggable-demo-product
        {
            padding: 5px;
            border: 1px solid #888;
            width: 115px;
            height: 135px;
            background-color: #fff;
            position: absolute;
            margin: 5px;
        }
        .draggable-demo-product img
        {
            width: 113px;
            border: 1px solid #aaa;
            border-top-width: 0px;
            outline-width: 15px;
        }
        .draggable-demo-product-header
        {
            border: 1px solid #888;
            height: 20px;
            border-bottom-width: 0px;
            font-size: 13px;
            position: relative;
            text-align: center;
        }
        .draggable-demo-product-header-label
        {
            margin-top: 3px;
        }
        .draggable-demo-product-price
        {
            position: absolute;
            top: 124px;
            left: 6px;
            width: 113px;
            text-align: center;
            
            font-size: 11px;
            display: none;
            height: 16px;
            border-top: 1px solid #888;
            border-bottom: 1px solid #fff;
        }
        .draggable-demo-title
        {
            font-size: 23px;
            
            text-align: center;
            padding: 7px;
            margin: 5px;
            font-weight: bold;
            border: 1px solid...

JavaScript

var cart = (function ($) {
            theme = $.jqx.theme;
            var productsOffset = 3,
                products = {
                    'Retro Rock T-shirt': {
                        pic: 'black-retro-rock-band-guitar-controller.png',
                        price: 15
                    },
                    'Lucky T-shirt': {
                        pic: 'bright-green-gettin-lucky-in-kentucky.png',
                        price: 18
                    },
                    'Loading T-shirt': {
                        pic: 'brown-loading-bar-computer-geek.png',
                        price: 25
                    },
                    'Cool Story T-shirt': {
                        pic: 'cool-story-bro.png',
                        price: 20
                    },
                    'The beard T-shirt': {
                        pic: 'fear-the-beard.png',
                        price: 17
                    },
                    'Don\'t care T-shirt': {
                        pic: 'honey-badger-don-t-care.png',
                        price: 19
                    },
                    'Guitar T-shirt': {
                        pic: 'scott-pilgrim-red-rock-band.png',
                        price: 24
                    },
                    'Dodgers T-shirt': {
                        pic: '2-sided-dodgers-bankrupt-t-shirt-ash.png',
                        price: 21
                    },
                    'Misfits T-shirt': {
                        pic: 'misfits-sf-giants-white.png',
                        price: 21
                    }
                },
            theme, onCart = false, cartItems = [], totalPrice = 0;
            function render() {
                productsRendering();
                gridRendering();
            }
            function addClasses() {
                $('.draggable-demo-catalog').addClass('jqx-scrollbar-state-normal-' + theme);
               ...