When I was implementing the dragable popup form feature I was pleased at how easy it was to use mooTool’s Drag.Move. My little form was easily moved to anywhere in the browser window, just as I intended. A problem arose when I tried to use the form inside the dragable element. The input elements of the form were not clickable, I could not get them to have focus, as if they were behind an invisible layer, which is actually what was going on. The form elements inside the dragable div they sitting in were not clickable, because they were dragable! Ack!

Happily I was able to find a solution for my problem: the dragable element required a handle.

The above image shows the Drag.Move handle in the upper right corner of the edit list item form div. You cannot move that dragable element unless you grab it by the handle, the move icon. Using a handle frees up the rest of the element for other clickable elements, like a form.

The JavaScript for including a handle in your Drag.Move element is as follows:

new Drag.Move('dragableDivID', {handle: 'dragHandleID'});

and the HTML, with some CSS:

<style>
.dragHandle{
    background:transparent url(/images/move.png) no-repeat scroll 0 0;
    cursor:move;
    float:right;
    height:30px;
    margin:15px 15px 0 0;
    width:30px;
}
</style>
<div class='dragableBox' id='dragableDivID'>
     <div class='dragHandle' id='dragHandleID'></div>
     <div class='dragableInner'> The content goes here</div>
</div>

In looking for this solution I found this great tutorial series by Consider:open called 30 Days of mooTools.  The entire series is very well done. Web developers at any level are likely to learn something new about mooTools there. Check out thethe tutorial on Drag.Move from the series that helped me out.

You might also like...

• Maintaining Dynamic Height on a Fx.Slide element with Mootools

The below diagram briefly illustrates how I implemented persistent cookies on List Central:

Persistent Cookies

My diagram is certainly cute, but it’s not terribly clear, so I’ll spell out the steps:

1. A user requests a page from List Central
2. List Central checks the users cookie jar for the List Central login cookie
   1. If found, the user is considered to be logged in
   2. If not found, List Central checks the users cookie jar for the List Central Persistent cookie
      1. If found, the system checks the, seemingly meaningless string of characters to determine if it has found a valid persistent cookie
         1. If the persistent cookie is valid, the system sets the List Central login cookie, and considers the user to be logged in
      2. If no persistent cookie was found, or it was found to be invalid, or expired, the user is not considered to be logged in, and is treated as a guest until s/he logs in via the login form
         1. On successful login, the system sets the List Central login cookies, and sets the persistent cookie only if the user checked ‘Remember me’

The “Login” cookie is set every time the user comes to the site and it is set to expire at the end of the session. The value of this cookie is a unique string that identifies the user on the site, encrypted, of course. The persistent cookie is only set when the user successfully logs in and checks ‘Remember me’. The system is able to validate the encrypted value of the persistent cookie against a corresponding value in the database to verify the identity of the user. It is set to expire after 2 weeks, which will result in the user having to login again after that time period.

It is important to note that there is a security risk involved in using persistent cookies. The user could accidently check “Remember Me” on a public computer, or someone other than the user could gain access to his or her computer. It is important to always request the user to re-enter their username and password when changing important user information, such as their email, username and password.

Random Posts

• Friday Round Up
• Make Flash sit behind HTML elements
• Writing a Business Plan