Permitting moving only of <img>>

I am struggling to achieve my desired behaviour with a div marked as contentEditable. I wish to allow the user to move an img around within the div and for it to be maintained inline, but not let them resize or otherwise modify that img. They should otherwise be able modify the text within the div.

The default browser behaviour may be seen below, with the img being able to be both moved and resized with the drag-handles:

<html>
  <head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  </head>
  <body>

    <div id="edit" contenteditable="true">
      Here is some text, and also an <img src="http://img841.imageshack.us/img841/1747/imagead.png" /> image
    </div>

  </body>
</html>

I have been playing around with various client scripts to attempt to achieve the desired functionality, but each combination I attempt seems to run into difficulty. What I can achieve is ultimate lockdown with:

<script type="text/javascript">
  $(document).ready(function() {
    $('img', '#edit').each(function (i, item) {
      item.contentEditable = false;
      $(item).bind('mousedown', function (e) {
        e.preventDefault();
      });
      if ($.browser.msie) {
        item.oncontrolselect = function () { return false; }
      }
    });
  });
</script>

but although this prevents any element duplication (a problem I had in Firefox) and resizing using drag handles (in IE), it is not possible to move the img at all.

UPDATE: Thanks to you guys, the closest I have got so far is:

<script type="text/javascript">
  $(document).ready(function() {
    $('img', '#edit').each(function (i, item) {
      attachEvents(item);
    });

    if ($.browser.mozilla) {
      document.execCommand("enableObjectResizing", false, false);
    }
  });

  function attachEvents(item) {
    if ($.browser.msie) {
      item.attachEvent('onresizestart', function (e) { 
        e.returnValue = false; 
      }, false);
      item.attachEvent('ondragend', function (e) { 
        // cannot get IE to rebind moved item (toElement or similar is not available until IE9 when using addEventListener)
        attachEvents(e.srcElement);
      }, false);
    } 
    if ($.browser.opera) {
      // doesn't seem to work at all in Opera 11
    }
  }
</script>

but the two remaining problems are complete lack of support in Opera (something I can live with) and the problem of how to rebind the events ondragend in IE.

Can anyone else assist?

回答1:

You could implement a draggable effect using JQuery ui on you img.

回答2:

In some browsers (notably Firefox but not IE), you can disable resize handles using document.execCommand() with the enableObjectResizing command:

document.execCommand("enableObjectResizing", null, false);