允许在contentEditable< div>内仅移动< img> [英] Permitting moving only of <img>s within contentEditable <div>
问题描述
我正在努力用 div 来标记为 contentEditable 来实现我想要的行为。我希望允许用户在 div 内移动一个 img ，并将其维护为内联，但不允许让他们调整大小或以其他方式修改 img 。他们应该可以修改 div 中的文本。
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.
默认的浏览器行为可能如下所示，可以使用拖动手柄移动和调整 img ：
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>
但是尽管这样可以防止任何元素重复（Firefox中出现的问题）以及使用拖动手柄调整大小在IE中），根本不可能移动 img 。
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>
但是剩下的两个问题完全不支持Opera（我可以拥有的东西）和
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.
任何人都可以协助？
推荐答案
在某些浏览器（特别是Firefox但不是IE）中，可以使用 document.execCommand（） with enableObjectResizing 命令：
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);
这篇关于允许在contentEditable< div>内仅移动< img>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
