jQWidgets Forums

Forum Replies Created

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

Author

Posts

January 13, 2014 at 10:39 am in reply to: How detect area dropped inside a div into another div 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>

January 13, 2014 at 7:25 am in reply to: How detect area dropped inside a div into another div 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 10, 2014 at 12:44 pm in reply to: How detect area dropped inside a div into another div 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 9:13 am in reply to: How detect area dropped inside a div into another div 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>

Author

Posts

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