Question

Contenteditable没有专注于左键单击，而是专注于右键单击。为什么？我做错了什么。我认为这是因为事件冒泡，如果它是那么我应该做什么。

＆＃13;

$(function() {
  $("#textTemplate").draggable({
    zIndex: 2500,
    helper: 'clone',
  });
  $("#editorDesignView").droppable({
    accept: '#textTemplate',
    drop: function(event, ui) {
      var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p></div>';
      $(html).appendTo(this).hide().slideDown();
      var currentHtml = $("#editor").val();
      $("#editor").val(currentHtml + html);
    }
  });
  $('#editorDesignView').sortable();
});

＆＃13;

* {
  box-sizing: border-box;
}

#wrapper {
  width: 100%;
  height: 610px;
}

#templateWrapper {
  width: 30%;
  height: 100%;
  float: left;
  overflow-y: scroll;
}

#editorBlock {
  width: 70%;
  height: 100%;
  float: left;
  position: relative;
  background-color: #f1f1f1
}

#editorDesignView {
  width: 100%;
  height: 100%;
}

#switch {
  background: #333;
  border: 1px solid #333;
  padding: 5px 20px;
  color: #fff;
  font-size: 1.5em;
  float: right;
  cursor: pointer;
}

#switch.active {
  background: #0091e1;
  border: 1px solid #0091e1;
}

＆＃13;

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="wrapper">
    <div id="templateWrapper">
      <div id="textTemplate" class="template">

        <div>Text</div>
      </div>
    </div>
    <div id="editorBlock">
      <div id="editorDesignView"></div>
    </div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

＆＃13;

Here is my codepen link

Answer 1

如果某个元素同时属于draggable和contenteditable，则可能会对编辑产生一些问题。

添加onclick='$(this).focus();'使其有效

$(function() {
  $("#textTemplate").draggable({
    zIndex: 2500,
    helper: 'clone',
  });
  $("#editorDesignView").droppable({
    accept: '#textTemplate',
    drop: function(event, ui) {
      var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;" onclick="$(this).focus();">Add your text here.</p></div>';
      $(html).appendTo(this).hide().slideDown();
      var currentHtml = $("#editor").val();
      $("#editor").val(currentHtml + html);
    }
  });
  $('#editorDesignView').sortable();
});

* {
  box-sizing: border-box;
}

#wrapper {
  width: 100%;
  height: 610px;
}

#templateWrapper {
  width: 30%;
  height: 100%;
  float: left;
  overflow-y: scroll;
}

#editorBlock {
  width: 70%;
  height: 100%;
  float: left;
  position: relative;
  background-color: #f1f1f1
}

#editorDesignView {
  width: 100%;
  height: 100%;
}

#switch {
  background: #333;
  border: 1px solid #333;
  padding: 5px 20px;
  color: #fff;
  font-size: 1.5em;
  float: right;
  cursor: pointer;
}

#switch.active {
  background: #0091e1;
  border: 1px solid #0091e1;
}

<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="wrapper">
    <div id="templateWrapper">
      <div id="textTemplate" class="template">

        <div>Text</div>
      </div>
    </div>
    <div id="editorBlock">
      <div id="editorDesignView"></div>
    </div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
  <script src="js/index.js"></script>
</body>
</html>

满意的是没有左键单击

1 个答案: