javascript - jquery draggable event changing the css of child element

Question

Hi please see this code

$('.new-div').draggable({
  containment: "#bord",
  create: function() {
    $(".new-div").css("width", 'auto');
  },
  drag: function() {
    $(".new-div").css("width", 'auto');
  },
  start: function() {
    $(".new-div").css("width", 'auto');
  },
  stop: function() {
    $(".new-div").css("width", 'auto');
  }
});
$(document).on("click", ".closeButton", function() {

  $(this).closest('div').remove();
});


$(".span1").on("click", function(e) {

  var mycontent1 = $(this).text();
  e.preventDefault();
  $(".span1").focus();
  $('.new-div').removeClass('active');
  $(this).closest('.new-div').addClass('active');

  if (mycontent1.trim() === "message") {

    $(".span1").text('');
    $(this).css("width", "100px");
    $(this).css("height", "6%");
    $('.new-div').css("width", "100px");
    $('.new-div').css("height", "6%");
  }
});

$("#font-size").on("change", function() {
  var v = $(this).val();
  $('.new-div').css('font-size', v + 'px');
});
$('.resizeButton').draggable({
  containment: '#bord',
  drag: function() {
    $('.new-div').height($('.resizeButton').position().top + 17);
    $('.new-div').width($('.resizeButton').position().left + 17);
    $('.new-div').width($('.resizeButton').position().left + 17);

    $('.new-div').css({
      'font-size': ($('.new-div').height() / 2.3)
    });


  }
});

.new-div {
  z-index: 1;
  position: absolute;
  width: auto;
  word-break: break-all;
  text-align: center;
  left: 30%;
  top: 15px;
  border: 2px solid black;
}
.parent-div {
  max-width: 236px;
  width: 236px;
  position: relative;
  overflow: hidden;
}
.closeButton {
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 27px;
  height: 27px;
  background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton {
  display: block;
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 27px;
  height: 27px;
  background: url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
  background-size: contain;
  cursor: resize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
  <div class="parent-div">
    <div class="new-div" contenteditable="true">
      <span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
     message
         </span>
      <a class="closeButton"></a>
      <a class="resizeButton"></a>
    </div>
    <div class="bord" style="z-index: -1;">
      <img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
    </div>

Answer 1

If you want the text box to keep its size when it is dragged, you can remove the following calls in the draggable component event handlers:

$(".new-div").css("width", 'auto');

The resulting code would be:

$(".new-div").draggable({
    containment: "#bord"
});

In the code snippet below, I also made changes to the click event handler of the span element, to keep the text box centered when the user types new text. In order to get that behavior, I had to put a non-breaking space in the box. Since that character is selected after clicking on message, the new content typed by the user will overwrite it.

Finally, a focus rectangle was visible in Chrome. This CSS attribute can be used to hide it:

.new-div:focus {
    outline: none;
}

Credit: The code for range selection was inspired by this answer given by Tim Down.

$(".new-div").draggable({
    containment: "#bord"
});

$(document).on("click", ".closeButton", function () {
    $(this).closest("div").remove();
});

$(".span1").on("click", function (e) {
    e.preventDefault();
    $(".new-div").removeClass("active");
    $(this).closest(".new-div").addClass("active");
    if ($(this).text().trim() === "message") {
        $(this).html(" ");
        var range = document.createRange();
        range.setStart(this, 0);
        range.setEnd(this, 1);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        $(".new-div").focus();
    }
});

$("#font-size").on("change", function () {
    var v = $(this).val();
    $(".new-div").css("font-size", v + "px");
});

$(".resizeButton").draggable({
    containment: "#bord",
    drag: function () {
        $(".new-div").height($(".resizeButton").position().top + 17);
        $(".new-div").width($(".resizeButton").position().left + 17);
        $(".new-div").width($(".resizeButton").position().left + 17);
        $(".new-div").css({ "font-size": ($(".new-div").height() / 2.3) });
    }
});

.new-div {
  z-index: 1;
  position: absolute;
  width: auto;
  word-break: break-all;
  text-align: center;
  left: 30%;
  top: 15px;
  border: 2px solid black;
}
.new-div:focus {
    outline: none;
}
.parent-div {
  max-width: 236px;
  width: 236px;
  position: relative;
  overflow: hidden;
}
.closeButton {
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 27px;
  height: 27px;
  background: url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}
.resizeButton {
  display: block;
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 27px;
  height: 27px;
  background: url('http://img.freepik.com/free-icon/resize-button_318-99883.jpg') no-repeat center center;
  background-size: contain;
  cursor: resize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<div class="col-sm-12">
  <div class="parent-div">
    <div class="new-div" contenteditable="true">
      <span data-scale-ratio="1" class="span1" data-scale-reference=".new-div">
     message
         </span>
      <a class="closeButton"></a>
      <a class="resizeButton"></a>
    </div>
    <div class="bord" style="z-index: -1;">
      <img src="https://s-media-cache-ak0.pinimg.com/236x/8b/8a/00/8b8a007ae01adf400e12b26f3b93fb3a.jpg">
    </div>