允许仅在contentEditable <div> </div>中移动<img/> s

时间:2011-01-25 15:13:50

标签: javascript jquery html dom contenteditable

我正在努力通过标记为div的{​​{1}}来实现我想要的行为。我希望允许用户在contentEditable内移动img并使其保持内联,但不允许他们调整大小或修改div。否则他们应该能够修改img中的文本。

下面可以看到默认的浏览器行为,div可以通过拖动句柄移动和调整大小:

img

我一直在使用各种客户端脚本来尝试实现所需的功能,但我尝试的每种组合似乎都遇到了困难。我可以实现的目标是终极锁定:

<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>

但是虽然这可以防止任何元素重复(我在Firefox中遇到的问题)和使用拖动句柄调整大小(在IE中),但根本无法移动<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>

更新:感谢你们,我到目前为止最接近的是:

img

但剩下的两个问题是Opera完全缺乏支持(我能接受的东西)以及如何在IE中重新绑定事件<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> 的问题。

其他人可以提供帮助吗?

2 个答案:

答案 0 :(得分:1)

您可以使用img上的JQuery ui实现可拖动效果。

答案 1 :(得分:1)

在某些浏览器(特别是Firefox但不是IE)中,您可以使用document.execCommand() enableObjectResizing命令禁用调整大小句柄:

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