Question

我正在努力通过标记为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>的问题。

其他人可以提供帮助吗？

Answer 1

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

Answer 2

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

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

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

2 个答案: