Ajax Control Toolkit's Dragpanelextender

I typically track stats to my blog using a free site called StatCounter ( http://www.statcounter.com ) which is a remarkable tool if you can run just a little JavaScript in a master page on your site.  I've noticed over the past several weeks that consistently a keyword in my searches keeps coming up on top!  See below:

stats

Now this is great and all - but I haven't done a blog on the <Ajax:Dragpanelextender> yet...where are you people coming from and why?  Ok ok, I jest.  I'm a man of the people so I'll give you what you want.

There's actually 2 ways a good drag panel is implemented.  Numero Uno is as a standalone drag-able panel, the second is setting the modalpopupextender to be drag-able.  In this case, we are going to focus on the first example.  Now, mind you there should be a good reason for letting users wily dilly drag content around on your site. Because you can isn't really good enough.  It will confuse the users to no end if you decide that something is drag enabled, with no behavior associated with it.  Ok, enough of the disclaimers, on to the code:

The incorporation I've used previously was for a "View in a Room" page that allowed users to see a piece of art in a designated room - allowing them to drag it around and position it the way they'd like.  We can go ahead and build a simplified version of the one seen here:

Liquidhue | Room View

I'm going to open up a new project and drop 2 images in - one is the room, the other is the image we are going to allow the user to drag around.  Feel free to use mine if you don't have 2 good images of your own. 

hands

 

  (right click: Save picture as)

 

room2 

 

 

  (right click: Save picture as)

 

 

 

It should save the high res version of both of these for you - but then again:  I've never tried to get windows live writer to accomplish that, so after I publish this I'll make sure it does, or attach images to this article at the bottom.

So create a blank Ajax enabled asp.net website and drop these two files into the images folder.

vs

(click above for a full sized version)

I'm going to go ahead and set my page up to display the larger room sized image first:

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div style="background-image:url(images/room2.jpg); width:800px; height:600px">
        </div>
    </form>
</body>

Really nothing hard so far.  We are just creating an 800 x 600 div, and setting our room as the background image to that Div.  Now it's time to add the panel that will act as our container for our drag enable image.

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div style="background-image:url(images/room2.jpg); width:800px; height:600px">
            <asp:Panel ID="pnlDragable" runat="server">
                <asp:Image ID="imgPlace" runat="server" ImageUrl="~/images/hands.jpg" Width="175px" />
            </asp:Panel>
        </div>
    </form>
</body>

Now in my LiquidHue example, some serious calculates are being done, based on the size I know that room to be (I took the photograph) and I'm sizing the picture being loaded accordingly using a longest side algorithm, based on how big the artist that uploaded the image said the final piece was...in this case we are just going to hard code it's with to 175px which looks like a real good size to fit that room.  It's time now to make that panel dragable using the ajax drag panel extender!

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div style="background-image: url(images/room2.jpg); width: 800px; height: 600px">
            <asp:Panel ID="pnlDragable" runat="server" BorderColor="gray" BorderWidth="1px" BackColor="white">
                <asp:Image ID="imgPlace" runat="server" ImageUrl="~/images/hands.jpg" Width="175px"
                    BorderColor="white" BorderWidth="5px" />
            </asp:Panel>
        </div>
        <Ajax:DragPanelExtender ID="DragPanelExtender1" runat="server" DragHandleID="imgPlace"
            TargetControlID="pnlDragable" />
    </form>
</body>

And now ladies and gentleman - for my next trick, I'll be teaching you a small Dropshadowextender hack that I've developed, that will give a more realistic looking drop shadow using the ajax extender.  It involves "stacking" the extender a few times on the same object, with different depths and opacity's.

<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div style="background-image: url(images/room2.jpg); width: 800px; height: 600px">
            <asp:Panel ID="pnlDragable" runat="server" Width="175">
                <asp:Image ID="imgPlace" runat="server" ImageUrl="~/images/hands.jpg" Width="175px"
                    BorderColor="white" BorderWidth="5px" />
                <Ajax:DropShadowExtender ID="ds1" runat="server" TargetControlID="imgPlace" Width="2"
                    TrackPosition="true" Opacity="1" />
                <Ajax:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="imgPlace"
                    Width="3" TrackPosition="true" Opacity=".8" />
                <Ajax:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="imgPlace"
                    Width="4" TrackPosition="true" Opacity=".4" />
                <Ajax:DropShadowExtender ID="DropShadowExtender3" runat="server" TargetControlID="imgPlace"
                    Width="5" TrackPosition="true" Opacity=".1" />
            </asp:Panel>
        </div>
        <Ajax:DragPanelExtender ID="DragPanelExtender1" runat="server" DragHandleID="imgPlace"
            TargetControlID="pnlDragable" />
    </form>
</body>

Now it should be noted, that there is a performance decrease with every drop shadow extender you put in there, especially with the track position.  Lastly, lets notify the user as they move their little mouse around, that they can drag the window (when they happen to put their cursor over it)

Completed Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="Javascript">
   1:  
   2:         function showDiv(){
   3:         var div = document.getElementById("dragText");
   4:         div.style.display = "block";
   5:         }
   6:         function hideDiv(){
   7:         var div = document.getElementById("dragText");
   8:         div.style.display = "none";
   9:         }
  10:     
</script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <div style="background-image: url(images/room2.jpg); width: 800px; height: 600px">
            <asp:Panel ID="pnlDragable" runat="server" Width="175">
                <asp:Image ID="imgPlace" runat="server" ImageUrl="~/images/hands.jpg" Width="175px"
                    BorderColor="white" BorderWidth="5px" onMouseOver="showDiv()" onMouseOut="hideDiv()" />
                <Ajax:DropShadowExtender ID="ds1" runat="server" TargetControlID="imgPlace" Width="2"
                    TrackPosition="true" Opacity="1" />
                <Ajax:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="imgPlace"
                    Width="3" TrackPosition="true" Opacity=".8" />
                <Ajax:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="imgPlace"
                    Width="4" TrackPosition="true" Opacity=".4" />
                <Ajax:DropShadowExtender ID="DropShadowExtender3" runat="server" TargetControlID="imgPlace"
                    Width="5" TrackPosition="true" Opacity=".1" />
                    <div id="dragText" style="display:none; position:relative; top:-150px; left:0px; border:1px solid black; width:100px; height:20px; background-color:Gray; color:white">
                        Dragable
                    </div>
            </asp:Panel>
        </div>
        <Ajax:DragPanelExtender ID="DragPanelExtender1" runat="server" DragHandleID="imgPlace"
            TargetControlID="pnlDragable" />
    </form>
</body>
</html>

 

Good luck and happy coding!

Bryan Sampica (freakyuno)

4 Comments

  • Thanks for the simple example. I like a lot of people am looking for an extender that will allow drag and drop only on certain areas. Like Component Art's Snap component.
    Do you know if anyone is working on adding better drag drop functionality to the toolkit?

  • I really dont have any inside information on that unfortunatly. I do know however that the ajax futures are usually published and kept well up to date.

    I dont know if it helps you any, but my experience is, that the dragable panel will only move inside it's parent container. Trying to move it outside it's parent container will usually snap it back to it's original position. Normally when this happened to me it was an anoyance that I tried to fix, so I havent played with it to much.

  • @Freakyuno:

    It seems that the DragDrop and Floating behaviors don't really consider boundaries, so beyond th drag panel I haven't had any luck implementing what you describe (being able to keep a dragged div inside another div's space, which is really essentially for non-trival drag scenarios), though it should be possible by extending DragDropManager. But unfortunately I haven't cracked the code.

  • Mock up this scenario - you'll see that you cant drag the panel anywhere, because the enclosing div isnt big enough for it to go anywhere.













Comments have been disabled for this content.