Разрешить перемещение только на <img>с в пределах содержимого. - PullRequest
Новая
       26

Разрешить перемещение только на <img>с в пределах содержимого.

0 голосов
/ 25 января 2011

Я изо всех сил пытаюсь достичь желаемого поведения с div, помеченным как 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>

Я поигрался с различными клиентскими скриптами, чтобы попытаться достичь желаемой функциональности, но каждая комбинация, которую я пробую, кажется, сталкивается с трудностями.То, что я могу достичь - это окончательная блокировка с помощью: 

<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 вообще невозможно.

ОБНОВЛЕНИЕ: Спасибо вам, ребята, самое близкое, что у меня есть, это: 

<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 (с чем я могу жить) и проблема перепривязки событий ondragend в IE.

Может ли кто-нибудь еще помочь?

Ответы [ 2 ]

1 голос
/ 25 января 2011

В некоторых браузерах (особенно Firefox, но не IE) вы можете отключить дескрипторы изменения размера, используя document.execCommand() с командой enableObjectResizing: 

document.execCommand("enableObjectResizing", null, false);
1 голос
/ 25 января 2011

Вы можете реализовать эффект перетаскивания, используя JQuery ui на вас img.

...