jQuery UI Widgets › Forums › Plugins › Validator, Drag & Drop, Sortable › jqxDragDrop Image

Tagged: , , ,

This topic contains 5 replies, has 2 voices, and was last updated by  fdoped 10 years, 2 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    jqxDragDrop Image Posts
  • October 30, 2014 at 1:58 pm jqxDragDrop Image #61880

    fdoped
    Participant

    Hi!

    It is possible to adapt the example of jqxDragDrop to work similar this link http://jqueryui.com/droppable/#photo-manager, but restricting for only one image at the same time?

    Thanks!

    October 30, 2014 at 2:22 pm jqxDragDrop Image #61885

    fdoped
    Participant

    I think this example is better to show http://aspsnippets.com/demos/742/

    October 31, 2014 at 12:30 pm jqxDragDrop Image #61961

    Nadezhda
    Participant

    Hello fdoped,

    Please, find below an example which shows how to drag and drop element in your case:

    <!DOCTYPE html>
<html lang="en">
<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.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdragdrop.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var temp;
            $('.draggable').bind('dragStart', function (event) {
                temp = event.target;
            });
            $('.draggable').jqxDragDrop({
                dropTarget: '.drop-target', onTargetDrop: function (event) {                    
                    $(".drop-target").append(temp);
                    $(temp).css({ "position": 'static', "float": "left" });                
                },
            });       
        });
    </script>
    <style type="text/css">
        .row {
            padding: 1px;
        }
        .draggable {
            border: 1px solid #bbb;
            background-color: #C9ECFF;
            width: 70px;
            height: 70px;
            left: 30px;
            top: 50px;
            margin: 5px;
        }
        #draggable-parent {
            background-color: #eeffee;
            width: 350px;
            height: 200px;
            border: 1px solid #eee;
            float: left;
        }
        .main-container {
            width: 950px;
            z-index: 0;
        }
        .drop-target {
            background-color: #FBFFB5;
            width: 550px;
            height: 170px;
            border: 1px solid #ddd;
            float: right;
            text-align: center;
        }
        #first {
        background-color: pink;
        }
    </style>
</head>
<body class='default'>
    <div class="main-container">
        <div id="draggable-parent">
            <div class="draggable" id="first">
            </div>
            <div class="draggable" id="second"> 
            </div>
        </div>
        <div class="drop-target">
            <div class="label">I'm a drop target</div>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Nadezhda

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

    October 31, 2014 at 8:32 pm jqxDragDrop Image #61977

    fdoped
    Participant

    Thank you Nadezhda,

    It is almost this. But the target area only must accept one figure at each time.
    And restict the drag only to target area.

    Best regards!

    November 3, 2014 at 9:50 am jqxDragDrop Image #62047

    Nadezhda
    Participant

    Hello fdoped,

    Unfortunately, this is not possible with dragdrop.

    Best Regards,
    Nadezhda

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

    November 3, 2014 at 11:35 am jqxDragDrop Image #62054

    fdoped
    Participant

    OK,

    Thank you Nadezhda.

    Best regards,

    Flavio

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.