drag & drop populate - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: drag & drop populate, jqxdragdrop, json, php

This topic contains 7 replies, has 2 voices, and was last updated by areis 12 years, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

drag & drop populate Posts

November 11, 2012 at 6:39 pm drag & drop populate #10845

areis

Participant

Hi.
someone can help me and say how to connect the example of jqxdragdrop with json and php?

thanks

November 12, 2012 at 7:57 am drag & drop populate #10860

Dimitar

Participant

Hello areis,

Could you, please, provide us with more information? Do you wish to implement similar solution where the items are populated through JSON?

Best Regards,
Dimitar

jQWidets team
http://www.jqwidgets.com/

November 12, 2012 at 10:42 am drag & drop populate #10878

areis

Participant

thanks for the reply.
What I wanted was for example http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdragdrop/index.htm#demos/jqxdragdrop/defaultfunctionality.htm
explain how it would be done dynamically using a database and php and json

Regards
Antonio Reis

November 12, 2012 at 11:03 am drag & drop populate #10879

Dimitar

Participant

Hi Antonio Reis,

The products variable of cart can be a PHP loaded JSON file rather than a local array as in the example. The JSON file may have three fields – name, pic and price.

Best Regards,
Dimitar

jQWidets team
http://www.jqwidgets.com/

November 12, 2012 at 11:27 am drag & drop populate #10880

areis

Participant

thanks for the reply.
can you give me an example? I’m not very good at it.
thank you

November 14, 2012 at 1:06 pm drag & drop populate #11002

areis

Participant

Hi.
I stil not solve the problem. Someone can help me to solve?

November 14, 2012 at 1:35 pm drag & drop populate #11003

Dimitar

Participant

Hi Antonio Reis,

Here is a solution with JSON:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jqxDragDrop, jQuery Draggable, jQWidgets, Default Functionality" />
    <meta name="description" content="jqxDragDrop is a plugin which will make any DOM element draggable. It can be used in 
combination with many widgets like jqxTree, jqxGrid, jqxListBox and etc." />
    <title id='Description'>Drag a T-Shirt from the left area and drop it into the 'Shopping
        Cart' table.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <style type="text/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;
        }
        .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-family: Verdana;
            font-size: 11px;
            display: none;
            height: 16px;
            border-top: 1px solid #888;
            border-bottom: 1px solid #fff;
        }
        .draggable-demo-title
        {
            font-size: 23px;
            font-family: Verdana;
            text-align: center;
            padding: 7px;
            margin: 5px;
            font-weight: bold;
            border: 1px solid #aaa;
        }
        .draggable-demo-cart-wrapper
        {
            float: right;
            border: 1px solid #aaa;
            height: 457px;
            width: 260px;
        }
        .draggable-demo-total
        {
            font-size: 17px;
            font-family: Verdana;
            margin: 6px;
            margin-top: 7px;
            padding: 7px;
        }
    </style>
    <script type="text/javascript">
        var cart = (function ($) {
            var productsOffset = 3,
            theme, onCart = false, cartItems = [], totalPrice = 0;
            var source =
            {
                datatype: "json",
                datafields: [
            { name: "name" },
            { name: "pic" },
            { name: "price" }
            ],
                url: "../../SUPPORT/SampleJSON.txt",
                async: false
            };
            var products = new $.jqx.dataAdapter(source);
            products.dataBind();
            var name;
            function render() {
                productsRendering();
                gridRendering();
            };
            function addClasses() {
                $('.draggable-demo-catalog').addClass('jqx-scrollbar-state-normal-' + theme);
                $('.draggable-demo-title').addClass('jqx-expander-header-' + theme);
                $('.draggable-demo-title').addClass('jqx-expander-header-expanded-' + theme);
                $('.draggable-demo-total').addClass('jqx-expander-header-' + theme).addClass('jqx-expander-header-expanded-' + theme);
                if (theme === 'shinyblack') {
                    $('.draggable-demo-shop').css('background-color', '#555');
                    $('.draggable-demo-product').css('background-color', '#999');
                }
            };
            function productsRendering() {
                var catalog = $('#catalog'),
                    imageContainer = $('</div>'),
                    image, product, left = 0, top = 0, counter = 0;
                var productsCount = products.records.length;
                for (var i = 0; i < productsCount; i++) {
                    product = products.records[i];
                    name = product.name;
                    image = createProduct(name, product);
                    image.appendTo(catalog);
                    if (counter !== 0 && counter % 3 === 0) {
                        top += 147; // image.outerHeight() + productsOffset;
                        left = 0;
                    }
                    image.css({
                        left: left,
                        top: top
                    });
                    left += 127; // image.outerWidth() + productsOffset;
                    counter += 1;
                }
                $('.draggable-demo-product').jqxDragDrop({ dropTarget: $('#cart'), revert: true });
            };
            function createProduct(name, product) {
                return $('<div class="draggable-demo-product jqx-rc-all">' +
                        '<div class="jqx-rc-t draggable-demo-product-header jqx-widget-header-' + theme + ' jqx-fill-state-normal-' + theme + '">' +
                        '<div class="draggable-demo-product-header-label"> ' + name + '</div></div>' +
                        '<div class="jqx-fill-state-normal-' + theme + ' draggable-demo-product-price">Price: <strong>$' + product.price + '</strong></div>' +
                        '<img src="../../images/t-shirts/' + product.pic + '" alt='
                        + name + '" class="jqx-rc-b" />' +
                        '</div>');
            };
            function gridRendering() {
                $("#jqxgrid").jqxGrid(
                {
                    height: 335,
                    width: 230,
                    theme: theme,
                    selectionmode: 'none',
                    columns: [
                      { text: 'Item', dataField: 'name', width: 120 },
                      { text: 'Count', dataField: 'count', width: 50 },
                      { text: 'Remove', dataField: 'remove', width: 60 }
                    ]
                });
                $("#jqxgrid").bind('cellclick', function (event) {
                    var index = event.args.rowindex;
                    if (event.args.datafield == 'remove') {
                        var item = cartItems[index];
                        if (item.count > 1) {
                            item.count -= 1;
                            updateGridRow(index, item);
                        }
                        else {
                            cartItems.splice(index, 1);
                            removeGridRow(index);
                        }
                        updatePrice(-item.price);
                    }
                });
            };
            function init() {
                theme = "classic";
                render();
                addClasses();
                addEventListeners();
            };
            function addItem(item) {
                var index = getItemIndex(item.name);
                if (index >= 0) {
                    cartItems[index].count += 1;
                    updateGridRow(index, cartItems[index]);
                } else {
                    var id = cartItems.length,
                        item = {
                            name: item.name,
                            count: 1,
                            price: item.price,
                            index: id,
                            remove: '<div style="text-align: center; cursor: pointer; width: 53px;"' +
                         'id="draggable-demo-row-' + id + '">X</div>'
                        };
                    cartItems.push(item);
                    addGridRow(item);
                }
                updatePrice(item.price);
            };
            function updatePrice(price) {
                totalPrice += price;
                $('#total').html('$ ' + totalPrice);
            };
            function addGridRow(row) {
                $("#jqxgrid").jqxGrid('addrow', null, row);
            };
            function updateGridRow(id, row) {
                var rowID = $("#jqxgrid").jqxGrid('getrowid', id);
                $("#jqxgrid").jqxGrid('updaterow', rowID, row);
            };
            function removeGridRow(id) {
                var rowID = $("#jqxgrid").jqxGrid('getrowid', id);
                $("#jqxgrid").jqxGrid('deleterow', rowID);
            };
            function getItemIndex(name) {
                for (var i = 0; i < cartItems.length; i += 1) {
                    if (cartItems[i].name === name) {
                        return i;
                    }
                }
                return -1;
            };
            function toArray(obj) {
                var item, array = [], counter = 1;
                for (var key in obj) {
                    item = {};
                    item = {
                        name: key,
                        price: obj[key].count,
                        count: obj[key].price,
                        number: counter
                    }
                    array.push(item);
                    counter += 1;
                }
                return array;
            };
            function addEventListeners() {
                $('.draggable-demo-product').mouseenter(function () {
                    $(this).children('.draggable-demo-product-price').fadeTo(100, 0.9);
                });
                $('.draggable-demo-product').mouseleave(function () {
                    $(this).children('.draggable-demo-product-price').fadeTo(100, 0);
                });
                $('.draggable-demo-product').bind('dropTargetEnter', function (event) {
                    $(event.args.target).css('border', '2px solid #000');
                    onCart = true;
                    $(this).jqxDragDrop('dropAction', 'none');
                });
                $('.draggable-demo-product').bind('dropTargetLeave', function (event) {
                    $(event.args.target).css('border', '2px solid #aaa');
                    onCart = false;
                    $(this).jqxDragDrop('dropAction', 'default');
                });
                $('.draggable-demo-product').bind('dragEnd', function (event) {
                    $('#cart').css('border', '2px dashed #aaa');
                    if (onCart) {
                        addItem({ price: event.args.price, name: event.args.name });
                        onCart = false;
                    }
                });
                $('.draggable-demo-product').bind('dragStart', function (event) {
                    var tshirt = $(this).find('.draggable-demo-product-header').text(),
                        price = $(this).find('.draggable-demo-product-price').text().replace('Price: $', '');
                    $('#cart').css('border', '2px solid #aaa');
                    price = parseInt(price, 10);
                    $(this).jqxDragDrop('data', {
                        price: price,
                        name: tshirt
                    });
                });
            };
            return {
                init: init
            }
        } ($));
        $(document).ready(function () {
            cart.init();
        });
    </script>
</head>
<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>
</html>

And here is the code of the file SampleJSON.txt:

[
{"name": "Retro Rock T-shirt", "pic": "black-retro-rock-band-guitar-controller.png", "price": "15"},
{"name": "Lucky T-shirt", "pic": "bright-green-gettin-lucky-in-kentucky.png", "price": "18"},
{"name": "Loading T-shirt", "pic": "brown-loading-bar-computer-geek.png", "price": "25"},
{"name": "Cool Story T-shirt", "pic": "cool-story-bro.png", "price": "20"},
{"name": "The beard T-shirt", "pic": "fear-the-beard.png", "price": "17"},
{"name": "Don't care T-shirt", "pic": "honey-badger-don-t-care.png", "price": "19"},
{"name": "Guitar T-shirt", "pic": "scott-pilgrim-red-rock-band.png", "price": "24"},
{"name": "Dodgers T-shirt", "pic": "2-sided-dodgers-bankrupt-t-shirt-ash.png", "price": "21"},
{"name": "Misfits T-shirt", "pic": "misfits-sf-giants-white.png", "price": "21"}
]

Best Regards,
Dimitar

jQWidets team
http://www.jqwidgets.com/

November 14, 2012 at 2:59 pm drag & drop populate #11006

areis

Participant

many, many thanks, Dimitar!!

Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.