jQWidgets Forums

Tagged: drag, drop, jqxsplitter, splitter

This topic contains 7 replies, has 4 voices, and was last updated by doctorhino 11 years, 11 months ago.

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

Author

Drag&Drop-object is cut off by Splitter Posts

June 11, 2013 at 8:52 am Drag&Drop-object is cut off by Splitter #22940

hannii

Member

I added the drag&drop functionality to a nested splitter which is working fine so far but there is a visual problem: When I’m dragging an item, it is cut off by the splitter. So within its own splitter panel, the object is rendered fine and it’s possible to add it to a different splitter panel in general. But it’s not possible to drag the object to a specific plane in another splitter panel since it’s not rendered.

My question: Is there a workaround how to fix this or is this a bug?

June 12, 2013 at 11:03 am Drag&Drop-object is cut off by Splitter #23016

Dimitar

Participant

Hello hannii,

Please, provide us with a sample code which we may test locally to determine the source of the issue.

Best Regards,
Dimitar

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

June 12, 2013 at 3:51 pm Drag&Drop-object is cut off by Splitter #23047

hannii

Member

hello dimitar,

this is my code in an simpler way. buttons should be dragged from right to left (but they are cut off by the splitter and not visible in the left panel during dragging).

many thanks
hannii

$(document).ready(function () {
var theme = getDemoTheme();
$(‘#leftSplitter’).jqxSplitter({ height: ‘500’, width: ‘400’, orientation: ‘vertical’, panels: [{ size: ‘200’ }, { size: ‘200’}] });

$(‘.dragable-base’).jqxDragDrop({
dropTarget : $(‘#leftSplitter’),
revert : true
});
addBaseEventListeners();
});

function addBaseEventListeners() {
$(‘.dragable-base’).bind(‘dropTargetEnter’, function(event) {
added = true;
$(this).jqxDragDrop(‘dropAction’, ‘none’);
});
$(‘.dragable-base’).bind(‘dropTargetLeave’, function(event) {
added = false;
$(this).jqxDragDrop(‘dropAction’, ‘default’);
});
$(‘.dragable-base’).bind(‘dragEnd’, function(event) {
if (added) {
$(“#left”).append(“

“+event.args.text+”

“);
added = false;
}
});
$(‘.dragable-base’).bind(‘dragStart’, function(event) {
var text = $(this).val();
$(this).jqxDragDrop(‘data’, {
text : text
});
});
};

West – North

Test Button to Drag

Test

June 13, 2013 at 6:11 am Drag&Drop-object is cut off by Splitter #23068

Dimitar

Participant

Hi hannii,

The issue may come from the fact that the z-index property of the dragged item(s) is lower than that of the splitter panel. You may try to increase it.

On a side note – remember to format your code as explained in the forum topic Code Formatting the next time you need to post your code on the forum.

Best Regards,
Dimitar

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

June 13, 2013 at 6:59 am Drag&Drop-object is cut off by Splitter #23073

hannii

Member

Hi Dimitar,

Thanks for you reply. I already tried to set the z-Index for my splitter and drag-objects accordingly but it was not helping either. Any other idea? So I assume it’s a bug? When will this be fixed?

Thanks
hannii

June 13, 2013 at 8:07 am Drag&Drop-object is cut off by Splitter #23084

Peter Stoev

Keymaster

Hi Guys,

Here’s a sample with Draggable objects within Splitter.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jqxDocking, jQuery Docking, jQWidgets, Default Functionality" />
    <meta name="description" content="jqxDocking is a widget which helps you to control and manage multiple windows and 
    even the layout of your page. Each window which is part of jqxDocking can be dragged around the Web page, 
    docked into docking zones, collapsed into a minimized state, expanded or pinned." />
    <title id='Description'>jqxDocking represents a widget which enables you to manage and
        layout multiple windows on a web page.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                    'JavaScript Certification - Welcome to our network',
                    'Business Challenges via Web take a part',
                    'jQWidgets better web, less time. Take a tour',
                    'Facebook - you have 7 new notifications',
                    'Twitter - John Doe is following you. Look at his profile',
                    'New videos, take a look at YouTube.com'
            ];
            var theme = getDemoTheme();
            $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 680, mode: 'docked' });
            $('#docking').jqxDocking('disableWindowResize', 'window1');
            $('#docking').jqxDocking('disableWindowResize', 'window2');
            $('#docking').jqxDocking('disableWindowResize', 'window3');
            $('#docking').jqxDocking('disableWindowResize', 'window4');
            $('#calendar').jqxCalendar({ theme: theme, width: 180, height: 180 });
            $('#newsTbs').jqxTabs({ theme: theme, width: 310, height: 181, selectedItem: 1 });
            $('#listbox').jqxListBox({ source: source, theme: theme, width: 310, height: 181 });
            $('#zodiak').jqxPanel({ theme: theme, width: 312, height: 180 });
            $('#jqxWidget').jqxSplitter({ theme: theme, width: 800, height: 800, panels: [{size: 700}] });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div>
            <div id="docking">
                <div>
                    <div id="window1" style="height: 220px;">
                        <div>
                            Date and Time
                        </div>
                        <div style="overflow: hidden;">
                            <div id="calendar" style="float: left; margin-right: 10px;">
                            </div>
                            <h3 style="text-align: center; color: #787878;">Sunny</h3>
                            <div style="float: left; margin-left: 30px; text-align: center;">
                                <img src="../../images/sun-icon.png" alt="Sunny" />
                            </div>
                            <div style="text-align: left; margin-left: 5px; margin-top: 10px; font-size: 10px; float: right; margin-right: 20px;">
                                Mo: 23 °C<br />
                                To 25 °C<br />
                                We: 27 °C
                            </div>
                        </div>
                    </div>
                    <div id="window2" style="height: 220px">
                        <div>
                            News
                        </div>
                        <div style="overflow: hidden;">
                            <div id="newsTbs">
                                <ul style="margin-left: 30px">
                                    <li>World</li>
                                    <li>Local</li>
                                    <li>Sports</li>
                                </ul>
                                <div>
                                    <div style="padding: 3px; margin: 10px; width: 150px; height: 84px; float: left;">
                                        <img src="../../images/news_ie6.jpg" alt="IE6" title="IE6" />
                                    </div>
                                    <span style="font-size: 11px;">Microsoft is set to get a little more pushy ensuring
                                    you have an up-to-date browser and will automatically update Internet Explorer...
                                    <span style="font-size: 8px;">(BBC)</span> </span>
                                </div>
                                <div>
                                    <div style="padding: 3px; margin: 10px; width: 144px; height: 81px; float: left;">
                                        <img src="../../images/local.jpg" alt="Tennis" title="Tennis" />
                                    </div>
                                    <span style="font-size: 11px;">The High Court has dismissed a challenge to laws that
                                    require immigrant spouses to be able to speak English in order to live in the UK...
                                    <span style="font-size: 8px;">(BBC)</span> </span>
                                </div>
                                <div>
                                    <div style="padding: 3px; margin: 10px; width: 130px; height: 73px; float: left;">
                                        <img src="../../images/tennis.jpg" alt="Tennis" title="Tennis" />
                                    </div>
                                    <span style="font-size: 11px;">British number one Elena Baltacha says Judy Murray is
                                    a "fantastic" appointment as Great Britain's new Fed Cup captain... <span style="font-size: 8px;">(BBC)</span> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div id="window3" style="height: 220px">
                        <div>
                            Zodiac
                        </div>
                        <div style="overflow: hidden;">
                            <div id="zodiak">
                                <div style="padding-right: 20px;">
                                    <div style="padding: 3px; width: 150px; height: 110px; float: left; margin: 10px;">
                                        <img src="../../images/leo.jpg" alt="Leo" title="Leo" />
                                    </div>
                                    <h3 style="text-align: center; color: #787878;">Leo</h3>
                                    <span style="font-size: 11px">Individuals born under the zodiac sign of Leo are very
                                good looking and have a healthy physique, with a broad forehead. Leo are very intelligent,
                                extremely courageous, love their freedom and live by their own rules. Indulgence
                                and extravagance is like second nature to them and they love to... </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="window4" style="height: 220px;">
                        <div>
                            E-mail
                        </div>
                        <div style="overflow: hidden;">
                            <div id="listbox">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            Panel 2
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

June 13, 2013 at 11:50 am Drag&Drop-object is cut off by Splitter #23093

hannii

Member

Hi Peter,

Thanks for the code but that doesn’t demonstrate my problem since it’s not using Drag&Drop. The example you sent is only using the Docking-Option within one splitter-panel. But I try to achive is drag&drop from one panel to another e.g. from the right to the left. In this case the dragged object is cut off by the splitter …

Do you have any suggestion for this problem?

Thanks,
hannii

July 23, 2013 at 1:48 pm Drag&Drop-object is cut off by Splitter #25625

doctorhino

Member

I was having the same problem. What I realized is that it is not the z-index dictating the cutoff, it is the overflow.

Try manually setting your overflows from hidden to visible in the debugger, you should eventually start to see items drag over and then be able to program that into your javascript file. You cannot use css classnames for this because they will be overriden by jqwidgets.

Author

Posts

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

You must be logged in to reply to this topic.