email with drag and drop

[Dunmail]

I'm trying to implement some drag and drop functionality in a schedule calculator.

The idea is that a block of data is dragged onto a mail icon, when dropped, the user's email client should be launched and the body of the email filled in with a JSON representation of the data. I've got delete and swap functionality done in a similar manner. The next step is for the receiver to be able to drag the email onto a another icon that would regenerate the data from the JSON object.

Now normally the mailto target lives inside a link, but how do I go about this?

 

[SrWebDeveloper]

I'm trying to implement some drag and drop functionality in a schedule calculator.

The idea is that a block of data is dragged onto a mail icon, when dropped, the user's email client should be launched and the body of the email filled in with a JSON representation of the data. I've got delete and swap functionality done in a similar manner. The next step is for the receiver to be able to drag the email onto a another icon that would regenerate the data from the JSON object.

Now normally the mailto target lives inside a link, but how do I go about this?

JQuery UI has drag/drop methods you can explore.

http://jqueryui.com/demos/draggable/


Use the handle option to specify what can be dragged and specify and DOM element to be the target for the drop. You then configure the callback which processes the action when the drop action is completed. Full details and example code on the link above (see related links top left of that page)

-jim

 

[Dunmail]

It's not the drag and drop that's the problem, it's how to invoke the mail program in the same way that is done when using

<a href="mailto:xxx@yyy.com">mail me </a>

Unless I've missed something on the link you provided.

 

[angelwatt]

I believe you can do something along the lines of:

window.location = 'mailto:...';

just like you would with any link. Personally though I don't like mailto links because they don't generally work right when you use webmail email. I usually just right-click them and choose to copy the email address.

 

[SrWebDeveloper]

I just wish to comment if I was a user on your site and I dragged/dropped and suddenly (without warning) my mailer spawned to send an email - I'd be pretty upset, it's just as annoying as a popup when used in that manner. So make it clear on the page, i.e. near or in the drop zone, what will occur. Also, window.location on some browsers used this way with mailto might mean users have to click on their "back" button to get back to the page.

Beyond that, just for posterity and public consumption, you might consider an alternative approach -- I think a more elegant solution which arguably offers more security and control:

Instead of the mailto psuedo protocol method, get the drop to trigger an Ajax call which directly sends a formatted email using PHP, server side, or link to a "Contact Us" page. Or display a hidden div that contains a nice form and submits to PHP. More user friendly, less obtrusive. Yes, more work, also!

-jim