jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 12 years, 4 months ago.

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

Author

dragdrop with multiple drop targets Posts

January 24, 2013 at 11:51 pm dragdrop with multiple drop targets #14181

Member

We’re busy evaluating jqx and need to know if there is any way to specify multiple drop targets for a drag-able element.

The documentation indicates that a drop target can be a ‘string’ or an object.

We tested using a ‘.isdroptarget’ class as the the target instead of the id of a single element and the dropTargetEvent does not seem to fire when dragging an item into an element with the .isdroptarget class.

Thanks,
Leonard

January 25, 2013 at 7:19 am dragdrop with multiple drop targets #14192

Dimitar

Participant

Hello Leonard,

Please make sure you use the latest version of jQWidgets (as of now, it is 2.6.1). Here is an example with the dropTargetEnter and dropTargetLeave events firing correctly:

<!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></title>
    <link rel="stylesheet" href="../2.5.5/jqwidgets/styles/jqx.base.css" type="text/css" />
    <style type="text/css">
        #dragDropItem
        {
            width: 100px;
            height: 100px;
            background-color: Green;
        }
        .target
        {
            width: 200px;
            height: 200px;
            background-color: Aqua;
        }
    </style>
    <script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../2.6/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../2.6/jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#dragDropItem").jqxDragDrop({ dropTarget: ".target" });
            $("#dragDropItem").on('dropTargetEnter', function (event) {
                $("#log").append("Entered target.<br />");
            });
            $("#dragDropItem").on('dropTargetLeave', function (event) {
                $("#log").append("Left target.<br />");
            });
        });
    </script>
</head>
<body>
    <div id="dragDropItem">
        Drag the item!</div>
    <div class="target">
        Target 1</div>
    <br />
    <div class="target">
        Target 2</div>
    <br />
    <div class="target">
        Target 3</div>
    <div id="log">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.