How detect area dropped inside a div into another div - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: div, drag, dragdrop, drop, drop target, inside, jqxdragdrop, multiple, target

This topic contains 8 replies, has 2 voices, and was last updated by jmsalai 10 years, 9 months ago.

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

Author

How detect area dropped inside a div into another div Posts

January 9, 2014 at 8:20 am How detect area dropped inside a div into another div #47611

Participant

Hi, I want to drag&drop an object list to an specific area, I do it well but I want to detect where I drop into a div area (draggable-area) for make a different event (.box).

On draggable-area I add a new product (list object on drag&drop)
On draggable-area inside class .box (NOT add object, call another function)

jQWidgets v3.1.0 (2013-Dec-23)

Example:

Option 2

….

Draggable area:
<div id=’draggable-area’ class=”draggable-widgets jqx-rc-all”>

<li class=”box”>12312321

</div>

January 10, 2014 at 8:00 am How detect area dropped inside a div into another div #47670

Dimitar

Participant

Hello jmsalai,

Please re-post your sample HTML code and format it by selecting it and clicking on the code button in the toolbar. Please also check out the jqxDragDrop demo Events.

Best Regards,
Dimitar

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

January 10, 2014 at 9:13 am How detect area dropped inside a div into another div #47674

jmsalai

Participant

All code, thanks !

<!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/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>
   <style type="text/css">
       #draggable-area ul li {
           width: 100px;
           height: 100px;
           background-color: #e3e3e3;
           margin-bottom: 10px;
           display: box;
       }
       
        .draggable-widgets
        {
            border: 2px dashed #aaa;
            padding: 5px;
            width: 232px;
            height: 457px;
            margin: auto;
        }
        .draggable-shop 
        {
            border: 1px solid #666;
            width: 665px;
            padding: 5px;
        }
        .draggable-catalog
        {
            position: relative;
            width: 397px;
            border: 1px solid #bbb;
            height: 457px;
            float: left;
        }
        .draggable-list
        {
            /*border: 1px solid #888;
            width: 150px;
            background-color: #fff;*/
        }
        .draggable-list:hover {
            font-weight: bold;
        }
        .draggable-list-tagname
        {
            border: 1px solid #888;
            height: 20px;
            border-bottom-width: 0px;
            font-size: 13px;
            position: relative;
            text-align: center;
        }
        .draggable-list-tagname-label
        {
            margin-top: 3px;
        }
        .draggable-widgets-wrapper
        {
            position: absolute;
            top: 0;
            right: 0;
            /*height: 457px;
            width: 260px;*/
            margin: 10px;
        }
        .hidden {
            display: none;
            visibility: hidden;
        }
        
        .active {
            border: 1px dashed;
        }
        
        ul li {
            list-style-type: none;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            onDisplay = false;

            function init() {
                $('.draggable-list').jqxDragDrop({ dropTarget: $('#draggable-area'), revert: true });
                
                addEventListeners();
            };

            function addItem(item) {
                console.log("addItem");
            };

            function addEventListeners() {
                
                $('.draggable-list').bind('dropTargetEnter', function (event) {
                    $(event.args.target).css('border', '2px solid #000');
                    onDisplay = true;
                    
                    console.log("dropTargetEnter");
                    $(this).jqxDragDrop('dropAction', 'none');
                });                
                
              
                
                $('.draggable-list').bind('dropTargetLeave', function (event) {
                    $(event.args.target).css('border', '2px solid #aaa');
                    onDisplay = false;
                    console.log("dropTargetLeave - go to initial target");
                    $(this).jqxDragDrop('dropAction', 'default');
                });
                $('.draggable-list').bind('dragEnd', function (event) {
                    
                    $('#draggable-area').css('border', '2px dashed #aaa');
                    
                    if (onDisplay) {
                        debugger;
                        console.log("dragEnd - ADD item");
                        console.log("tagname: "+event.args.tagname+" - idtag: "+event.args.idtag);
                        addItem();
                        onDisplay = false;
                    }
                });
                $('.draggable-list').bind('dragStart', function (event) {
                    
                    console.log("dragStart - drag item");
                    
                    var tagname = $(this).find('.draggable-list-tagname').text(),
                        idtag = $(this).find('.draggable-list-idtag').text();
                    $('#draggable-area').css('border', '2px solid #aaa');
                    
                    
                    console.log("tagname - "+tagname);
                    console.log("idtag - "+idtag);
                    
                    $(this).jqxDragDrop('data', {
                        tagname: tagname,
                        idtag: idtag
                        
                    });
                });
            };

            init();
        });
    </script>
</head>
<body class='default'>

<ul>
    <li class="draggable-list">
        Opcio 1
        <div class="draggable-list-tagname hidden">Titol del producte</div>
        <div class="draggable-list-idtag hidden">L324CFG</div>
    </li>
    <li>Opcio 2</li>
    <li>Opcio 3</li>
    <li>Opcio 4</li>
    <li>Opcio 5</li>
    <li>Opcio 6</li>
</ul>

    
    <div style="clear: both;"></div>
    <div class="draggable-widgets-wrapper jqx-rc-all">
        <div id='draggable-area' class="draggable-widgets jqx-rc-all">
            <ul>
                <li class="box">12312321</li>
                <li class="box">32423</li>
            </ul>
            
        </div>
    </div>
        
    </div>
</body>
</html>

January 10, 2014 at 10:56 am How detect area dropped inside a div into another div #47676

Dimitar

Participant

Hi jmsalai,

Here is an example, based on the demo Events, that shows you how to differentiate between an inner and an outer drop targets by checking the draggable item’s coordinates.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#draggable').jqxDragDrop({ restricter: 'parent', dropTarget: '#drop-target' });

            var targetEntered = false;

            $('#draggable').bind('dragEnd', function (event) {
                var position = event.args.position;
                var left = position.left;
                var top = position.top;
                var width = $('#draggable').width();
                var height = $('#draggable').height();
                var innerPosition = $("#inner-drop-target").offset();
                var innerWidth = $('#inner-drop-target').width();
                var innerHeight = $('#inner-drop-target').height();
                if (targetEntered == true) {
                    if (((left >= innerPosition.left && left <= innerPosition.left + innerWidth) && (top >= innerPosition.top && top <= innerPosition.top + innerHeight)) ||
                    ((left + width >= innerPosition.left) && (left + width <= innerPosition.left + innerWidth) && (top + height >= innerPosition.top && top + height <= innerPosition.top + innerHeight)) ||
                    ((left >= innerPosition.left && left <= innerPosition.left + innerWidth) && (top + height >= innerPosition.top && top + height <= innerPosition.top + innerHeight)) ||
                    ((left + width >= innerPosition.left) && (left + width <= innerPosition.left + innerWidth) && (top >= innerPosition.top && top <= innerPosition.top + innerHeight))) {
                        alert("Inner drop target");
                    } else {
                        alert("Outer drop target");
                    };
                };
            });

            $('#draggable').bind('dropTargetEnter', function (event) {
                targetEntered = true;
            });

            $('#draggable').bind('dropTargetLeave', function (event) {
                targetEntered = false;
            });
        });
    </script>
    <style type="text/css">
        .row
        {
            padding: 1px;
        }
        .draggable
        {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 50px;
            height: 50px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent
        {
            background-color: #eeffee;
            width: 400px;
            height: 400px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container
        {
            width: 650px;
            z-index: 0;
        }
        .events
        {
            float: right;
            padding: 10px;
            font-family: Tahoma;
            font-size: 13px;
        }
        .label
        {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        #drop-target
        {
            background-color: #FBFFB5;
            width: 200px;
            height: 200px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
        #inner-drop-target
        {
            background-color: Indigo;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body class='default'>
    <div class="main-container">
        <div id="draggable-parent">
            <div id="draggable" class="draggable">
                <div class="label">
                    Drag me!</div>
            </div>
            <div id="drop-target">
                <div id="inner-drop-target">
                    Inner
                </div>
                Outer
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 10, 2014 at 12:44 pm How detect area dropped inside a div into another div #47684

jmsalai

Participant

Thanks Dimitar,

its somethink like your post but if you had more inner div inside drop target, how do you detect ?
I want to detect diferents div’s inside drop target or make somethink like this code with Jquery UI

<!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>
    <script type="text/javascript" src="jqwidgets/scripts/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
   <style type="text/css">
div{margin:20px 10px;padding:10px;}
.droppable{border:1px solid transparent;background-color:#ccc;}
.draggable:hover{cursor:move; }
    </style>
    <script type="text/javascript">
        $(function(){
            $( ".draggable" ).draggable({    
                revert: true,
                helper: "clone",
                revertDuration: 300,  
                start: function( event, ui ) {
                    console.log("start DRAG");
                    $( ".draggable" ).draggable({revert: true});
                    $('.droppable').css("border","1px dashed");
                },
                stop: function( event, ui ) {
                    console.log("stop DRAG");
                    $('.droppable').css("border","1px solid transparent");
                    $( ".draggable" ).draggable({revert: true});
                }
                
            });
            $(".droppable").droppable({
                    accept: '.draggable',
                    over: function(event, ui) {
                        $(this).css("border","1px solid");
                    },
                    out: function(event, ui) {
                        $(this).css("border","1px dashed");
                    },    
                    drop: function() { 
                debugger;
                        $( ".draggable" ).draggable({revert: false});
                            idTag = $(event.target).attr("idtag");
                            alert("You dropped to div ID "+$(this).attr('id')+"\nidTag: "+idTag); 
                        }
                });

        });
    </script>
</head>
<body>

<div id="droppable_1" class="droppable">1</div>
<div id="droppable_2" class="droppable">2</div>
<div id="droppable_3" class="droppable">3</div>
<div id="droppable_4" class="droppable">4</div>

<ul>
    <li class="draggable" idtag="FGHTWaasd22">Opció 1</li>
    <li>Opció 2</li>
    <li class="draggable" idtag="asdasdas2123432">Opció 3</li>
</ul>

</body>
</html>

It’s possible to do this width JqWidget ?
if not, can I merge with the same page Jquery UI + JqWidget ?

Thanks a lot.

January 10, 2014 at 1:34 pm How detect area dropped inside a div into another div #47687

Dimitar

Participant

Hi jmsalai,

Here is an updated version of the first example, with two inner drop targets:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#draggable').jqxDragDrop({ restricter: 'parent', dropTarget: '#drop-target' });

            var targetEntered = false;

            $('#draggable').bind('dragEnd', function (event) {
                var position = event.args.position;
                var left = position.left;
                var top = position.top;
                var width = $('#draggable').width();
                var height = $('#draggable').height();
                var innerPosition1 = $("#inner-drop-target").offset();
                var innerWidth1 = $('#inner-drop-target').width();
                var innerHeight1 = $('#inner-drop-target').height();
                var innerPosition2 = $("#second-inner-drop-target").offset();
                var innerWidth2 = $('#second-inner-drop-target').width();
                var innerHeight2 = $('#second-inner-drop-target').height();
                if (targetEntered == true) {
                    if ((left >= innerPosition1.left) && (left + width <= innerPosition1.left + innerWidth1) && (top >= innerPosition1.top) && (top + height <= innerPosition1.top + innerHeight1)) {
                        alert("First inner drop target");
                    } else if ((left >= innerPosition2.left) && (left + width <= innerPosition2.left + innerWidth2) && (top >= innerPosition2.top) && (top + height <= innerPosition2.top + innerHeight2)) {
                        alert("Second inner drop target");
                    } else {
                        alert("Outer drop target");
                    };
                };
            });

            $('#draggable').bind('dropTargetEnter', function (event) {
                targetEntered = true;
            });

            $('#draggable').bind('dropTargetLeave', function (event) {
                targetEntered = false;
            });
        });
    </script>
    <style type="text/css">
        .row
        {
            padding: 1px;
        }
        .draggable
        {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 35px;
            height: 35px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent
        {
            background-color: #eeffee;
            width: 400px;
            height: 400px;
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container
        {
            width: 650px;
            z-index: 0;
        }
        .events
        {
            float: right;
            padding: 10px;
            font-family: Tahoma;
            font-size: 13px;
        }
        .label
        {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        #drop-target
        {
            background-color: #FBFFB5;
            width: 200px;
            height: 250px;
            border: 1px solid #ddd;
            margin-left: 190px;
            margin-top: 70px;
            z-index: 1;
        }
        #inner-drop-target
        {
            background-color: Indigo;
            width: 100px;
            height: 100px;
        }
        #second-inner-drop-target
        {
            background-color: Blue;
            width: 100px;
            height: 100px;
            margin-top: 25px;
        }
    </style>
</head>
<body class='default'>
    <div class="main-container">
        <div id="draggable-parent">
            <div id="draggable" class="draggable">
                <div class="label">
                    Drag me!</div>
            </div>
            <div id="drop-target">
                <div id="inner-drop-target">
                    First Inner
                </div>
                Outer
                <div id="second-inner-drop-target">
                    Second Inner</div>
            </div>
        </div>
    </div>
</body>
</html>

As for jQuery UI, it can be successfully used alongside jQWidgets in a page.

Best Regards,
Dimitar

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

January 13, 2014 at 7:25 am How detect area dropped inside a div into another div #47777

jmsalai

Participant

Ok thanks Dimitar,

Is there any other possibility to do the same without detect width and height of all targets inside the “targetEntered”.
It’s because is probably that I have a lot of divs insdide and I want to detect id with some simple code.

Do you know how to do it ?

Lots of thanks Dimitar for your kickly reply.

January 13, 2014 at 9:23 am How detect area dropped inside a div into another div #47785

Dimitar

Participant

Hi jmsalai,

Unfortunately, this is not possible, because the target, as the jqxDragDrop plugin understands it, is the enveloping grid. The inner divs are just elements of the target.

If, however, you have separate targets (defined by a common class), you can try the following approach:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery DragDrop Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        .targetDivs
        {
            width: 200px;
            height: 200px;
        }
        #t1
        {
            background-color: Teal;
        }
        #t2
        {
            background-color: Orange;
        }
        #element
        {
            margin-left: 3px;
            margin-bottom: 20px;
            width: 50px;
            height: 50px;
            background-color: Maroon;
        }
    </style>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Initialize jqxDraggable
            var entered = false;
            var enteredId = "";
            $("#element").jqxDragDrop({ dropTarget: ".targetDivs", onDropTargetEnter: function (target) {
                entered = true;
                enteredId = target[0].id;
            }, onDropTargetLeave: function () {
                entered = false;
            }
            });
            $('#element').bind('dragEnd', function (event) {
                var e = event;
                if (entered == true) {
                    $("body").append("Drag end on: " + enteredId + "<br />");
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id="element">
        Drag me</div>
    <div id="t1" class="targetDivs">
    </div>
    <div style="width: 100px; height: 100px;">
    </div>
    <div id="t2" class="targetDivs">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

January 13, 2014 at 10:39 am How detect area dropped inside a div into another div #47786

jmsalai

Participant

Thanks Dimitar,

Finally I made some modifications about your code example.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jqwidgets/scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxpanel.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="jqwidgets/scripts/demos.js"></script>   
    <script type="text/javascript">
        $(document).ready(function () {
            $('#draggable').jqxDragDrop({ restricter: 'parent', dropTarget: '#drop-target', revert: true });

            var targetEntered = false;

            $('#draggable').bind('dragEnd', function (event) {
                debugger;
                
                var position = event.args.position;
                var left = position.left;
                var top = position.top;
                var width = $('#draggable').width();
                var height = $('#draggable').height();
                
                if (targetEntered == true) {
                    
                    targetInsideDiv = false;
                    
                    $("#drop-target ul li").each(function(){
                        var innerPosition = $("#"+this.id).offset();
                        var innerWidth = $("#"+this.id).width();
                        var innerHeight = $("#"+this.id).height();
                                
                        if ((left >= innerPosition.left) && (left + width <= innerPosition.left + innerWidth) && (top >= innerPosition.top) && (top + height <= innerPosition.top + innerHeight)) {
                            $("#drop-target ul li").css("outline","none");
                            $("#"+this.id).css("outline", "1px solid #aaa");
                            alert("ID: "+this.id+" - inner drop target");
                            
                            targetInsideDiv = true;
                        }
                        
                    });
                    
                    if(!targetInsideDiv) alert("OUTSIDE - ADD new widget");
                    $("#drop-target").css('outline', '2px dashed #aaa');

         };
                
            });

            $('#draggable').bind('dragStart', function (event) {
                $('#drop-target').css('outline', '2px dashed #aaa');

                
                
            });
            
            $('#draggable').bind('dragEnd', function (event) {
                $('#drop-target').css('outline', '2px solid transparent');
            });

            $('#draggable').bind('dropTargetEnter', function (event) {
                $(event.args.target).css('outline', '2px solid #aaa');
                $(this).jqxDragDrop('dropAction', 'none');
                
                $("#drop-target ul li").css("outline","1px dashed #aaa");
                targetEntered = true;
            });

            $('#draggable').bind('dropTargetLeave', function (event) {
                
                $("#drop-target ul li").css("outline","none");
                
                $(event.args.target).css('outline', '2px dashed #aaa');
                targetEntered = false;
            });
        });
    </script>
    <style type="text/css">
        .row
        {
            padding: 1px;
        }
        .draggable
        {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 35px;
            height: 35px;
            left: 30px;
            top: 50px;
            padding: 5px;
            z-index: 2;
        }
        #draggable-parent
        {
            background-color: #eeffee;
            width: 100%;
            /*height: 400px;*/
            text-align: center;
            border: 1px solid #eee;
            float: left;
        }
        .main-container
        {
            width: 100%;
            z-index: 0;
        }
        .events
        {
            float: right;
            padding: 10px;
            font-family: Tahoma;
            font-size: 13px;
        }
        .label
        {
            position: relative;
            font-family: Verdana;
            font-size: 11px;
            color: #000;
        }
        #drop-target
        {
            background-color: #FBFFB5;
            width: 500px;
            /*height: 250px;*/
            /*margin-left: 190px;
            margin-top: 70px;*/
            float: right;
            z-index: 1;
        }
        #inner-drop-target
        {
            background-color: Indigo;
            width: 100px;
            height: 100px;
        }
        #second-inner-drop-target, #third-inner-drop-target
        {
            background-color: Blue;
            width: 100px;
            height: 100px;
            margin-top: 25px;
        }
        
        .gridster ul li {
            width: 100px;
            height: 100px;
            float: left;
            margin: 0 10px 10px;
            background-color: grey;
            list-style-type: none;
        }
    </style>
</head>
<body class='default'>
    <div class="main-container">
        <div id="draggable-parent">
            <div id="draggable" class="draggable">
                <div class="label">Drag me!</div>
            </div>
            <div id="drop-target" class="gridster">
                
            <ul>
                <li data-row="1" data-col="1" data-sizex="2" data-sizey="2" id="147e8a5f-886b-ce98-3508-0cb8e8812370"><iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.es/maps?q=tarragona&ie=UTF8&hq=&hnear=Tarragona,+Catalu%C3%B1a&t=m&z=13&ll=41.119019,1.245212&output=embed"></iframe></li>
                <li data-row="1" data-col="3" data-sizex="1" data-sizey="3" id="a0c2a0cb-fec4-8ccd-e9df-2b504bc68420">1</li>
                <li data-row="1" data-col="4" data-sizex="4" data-sizey="3" id="e4a9ca5d-458e-a98e-3432-9eb06d6650ac"><div id="jqxgrid2" class="table">Grid jqxgrid2</div></li>
                <li data-row="1" data-col="8" data-sizex="4" data-sizey="3" id="ee246a74-9c5f-12ff-2f3e-e8421f46c000"><button class="js-delete-this-widget">Delete this widget</button><div id="chart3" class="chart"></li>
                <li data-row="4" data-col="1" data-sizex="1" data-sizey="3" id="72976b9f-c661-87ca-1355-fa3bae77d630">4</li>
                <li data-row="3" data-col="1" data-sizex="1" data-sizey="1" id="a174a99b-b839-63eb-f0bf-a540919f53bb">5<button class="js-delete-this-widget">Delete this widget</button></li>
                <li data-row="3" data-col="2" data-sizex="1" data-sizey="1" id="73ca63a9-3af2-1293-7413-52f12adab7e3">6</li>
                <li data-row="4" data-col="2" data-sizex="1" data-sizey="3" id="9f332a99-544e-894e-69ec-472daffddef3">7<br><button class="js-delete-this-widget">Delete this widget</button></li>
                <li data-row="4" data-col="3" data-sizex="4" data-sizey="3" id="dba09504-0862-9cb6-9902-b68bc1bd3ad8"><div id="chart1" class="chart"></li>
                <li data-row="4" data-col="7" data-sizex="5" data-sizey="7" id="c942bcb9-6587-60dd-81d2-09969bc025d4"><div id="chart2" class="chart"></li>
                <li data-row="7" data-col="1" data-sizex="6" data-sizey="4" id="64c8ae0b-d6fc-d02e-1f60-1cd50ea1165b"><div id="jqxgrid" class="table">Grid jqxgrid</div></li>
              </ul>                

            </div>
        </div>
    </div>
</body>
</html>

Author

Posts

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

You must be logged in to reply to this topic.