onDrag() function in javascript is not working in firefox. what is the alternative function we can use for.

Posted on 2008-11-02
Last Modified: 2013-12-07
i have used onDrag() function in javacript to resize the iframe in html.

please find the same in following url.

its was working perfectly in IE and firefox. reason is onDrag() is not supported by firefox. please tell me the alternative method in firefox for using handle drag event.
Question by:psarun85
  • 2
  • 2

Expert Comment

Comment Utility
You would have to implement an equivalent ondrag event using a combination of the mousedown and mouseup events.  This code can do it.  Any element of class resizable is resizable.


<script type="text/javascript">


window.onload = function() {

	var all = document.getElementsByTagName("*");

	for(i=0; i<all.length; i++){

		if(all[i].className == "resizable") {

			all[i].onmousedown = function(e) { startDrag(e); return false; };




var dragElement = null;

window.onmouseup = endDrag;

function startDrag(e) {

	if(!e) e = window.event;

	var el = ( ? : e.srcElement;


	el.startX = e.clientX;

	el.startY = e.clientY;


	dragElement = el;


function endDrag(e) {

	if(!dragElement) return;

	var el = dragElement;


	if(! = el.clientWidth;

	var w =,; = w - (el.startX - e.clientX);


	if(! = el.clientHeight;

	var h =, = h - (el.startY - e.clientY);


	dragElement = null;






<img src="open.jpg" class="resizable">

<div style="width: 300px; height: 300px; border-style: solid; border-color: rgb(0,0,0); border-width: 1px;" class="resizable"></div>



Open in new window


Author Comment

Comment Utility
when i copied this. and i try to implement , but even in the internet exlorer it was not working

may i know the problem in the code please.

Expert Comment

Comment Utility
Did you try the test page I posted?  Copy what I posted into a blank HTML file and save it.  See if it meets your requirements.  If so, post your implementation and I'll try to debug.

Author Comment

Comment Utility

sorry for the delay
here is the link

i have copied your source code in html page. and added iframe inside the div tag. it was working in firefox, that too we can expand and unable to reduce the size. and even increasing the size was not working in internet explorer.

kindly tell me solution for this

Accepted Solution

ee_auto earned 0 total points
Comment Utility
Question PAQ'd and stored in the solution database.

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now