How can I enable dragging of an <embed> object on a webpage (with javascript)? Normally, when I select some text or an image on a webpage, I am able to drag it around, and I want to do the same for the object.
Specifically, I want to be able to drag a YouTube video. I’m not concerned about dropping for now, and also I don’t want to use jQuery UI if at all possible. The YouTube embed looks like this
<embed id="movie_player" ... type="application/x-shockwave-flash" />
I’m writing a browser extension (for Chrome), so I have full access to the DOM and the browser.
I think jQuery is the best here, it is also javascript and all you do is embed it to your website. And if you want a semi-transparent effect to view that you are dragging, I think you can add an event for a dragging handle. Use onMouseDown and onMouseUp. For example, this div is handle your youtube:
The CSS for transparent is:
opacity: .7; filter:Alpha(Opacity=70);whereby 0.7 and 70 is the opacity percent of element![Example]:
<div onMouseDown="this.style.opacity='0.7'; this.style.filter='Alpha(Opacity=70)';" onMouseUp="this.style.opacity='1.0'; this.style.filter='Alpha(Opacity=100)';"><br><embed something here></embed></div>.Ok, If you change your mind somehow and you want to use jQuery, give it a try, I promise it is extremely easy!
First of all, embed this into your website:
<script src="http://code.jquery.com/jquery-1.5.1.min.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script><script language="javascript" type="text/javascript">$(document).ready(function(){$(".drag").draggable();});</script>Secondly, give anything you want to drag a class “drag”, in this case:
<div class="drag">YOUR YOUTUBE VIDEO EMBED HERE</div>Use it together with the semi-transparent effect, I think that all you need, and I hope this help.
xx3004,