Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Stop images from being dragged.

Posted on 2013-01-06
7
Medium Priority
?
223 Views
Last Modified: 2013-01-08
I'm using <input> to contain images because <inputs> don't start being dragged like <img>'s do.  

I did this in particular for a situation where a drag clone is made to appear over a static "drag template" image.  I needed to stop the static drag template image from dragging.   All in non-library javascript, which is how I want it to work.  There's a lot of custom code and variable conditions determining what can or cannot be dragged on the page.

Might there be another way to deal with this problem of images being dragged?

Any help with this would be appreciated.

Thanks!
0
Comment
Question by:codequest
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 33

Expert Comment

by:Big Monty
ID: 38751196
if you can put a div around the images, you can then do something like this:

<div id="myDiv" onmousedown="return false;">
   <img src='abc.gif' />
<div>

To totally protect images, watermark them. As soon as you display them on your page and someone visits it, it's been downloaded, so any script won't protect an image.
0
 
LVL 2

Author Comment

by:codequest
ID: 38751585
Thanks the input.   I tried variations on this:

<div id="GR_BA999" onmousedown = "return false;">
<img src="../../App_Images/DnDNewBoundary.BMP" alt="" width="35px" height="20px" onmousedown = "return false;"/>
</div>

Open in new window


However none of that stopped the image drag.   Here's a more complete description of the situation, and also a solution to that immediate problem.

http://stackoverflow.com/questions/14025892/drag-and-drop-with-clone-produces-circle-slash

I was hoping for something simpler because putting the image in an input has side effects.
0
 
LVL 33

Expert Comment

by:Big Monty
ID: 38751667
not 100% sure, but I don't think you're suppose to have spaces in a tags attribute, so change

<div id="GR_BA999" onmousedown = "return false;">

to

<div id="GR_BA999" onmousedown="return false;">
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:codequest
ID: 38751948
Thanks for input.  Tried it: no change in behavior.
0
 
LVL 33

Expert Comment

by:Big Monty
ID: 38751962
not sure then, as that really should work. I would suggest click the Request Attention feature to see if there other experts who may be able to help.
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 2000 total points
ID: 38754177
For me, the following works in IE9, FireFox and Chrome (up-to-date):
<img src="../../App_Images/DnDNewBoundary.BMP" alt="" width="35px" height="20px" ondragstart = "return false;"/>

Open in new window

No div, no input. The dragging simply doesn't start, the cursor doesn't change.

I must admit though that I'm not clear on the expected end result, sometimes you do need to enable dragging? Is it about protecting certain images? Because TBD's remark about that is spot on, stopping the dragging is not gonna stop people copying your images.
0
 
LVL 2

Author Comment

by:codequest
ID: 38755952
Thanks for the input. The ondragstart = "return false;" worked.  Big help.   That gives me more flexibility  And, it also worked inside the div, so more flexibility still.

I appreciate the comments on copying images;  that was not the concern.  The images in question are little diagram graphic icons, nothing special about them.

These graphics sit in header bar at the top of the diagram space, where they can be dragged (via a clone) onto the diagram.  The issue was that between the time I would mousedown on the "static/non-moving" graphic, and the time that the drag clone was positioned and made visible, the system would start dragging the static graphic, which would interfere with the drag clone operation.

Nice to get that fixed without having to make the static graphics into inputs.  Grazie!
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

715 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