All geek questions in one place

Jquery draggable event modifying css of child

Hi 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>

https://jsfiddle.net/felixtm/jaboLc3u/34/

In this case, when I print a message in a text box and resize it, it works correctly. But after resizing the text and dragging the text to resize the window, it goes far from the div. Why is this so?

+5
source share
4 answers

If you want the text box to retain its size when dragging and dropping, you can delete the following calls in the event handlers of the drag component:

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

Final code:

 $(".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 in new text. To get this behavior, I had to put an irreplaceable space in the field. Since this character is selected after clicking on message , the new content typed by the user will overwrite it.

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

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

Credit: The range selection code 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("&nbsp;"); 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>
+3
source

I think the main problem is that you type .closebutton not inside a div;)

I'm not so advanced as to completely fix it, but ...

 $( '.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(){ $(".new-div").remove(); }); $(".span1").on("click", function(e){ var mycontent1= $(".span").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> </div> </div>
+2
source

Move your attribute contenteditable="true" from div.new-div ( <div class="new-div" contenteditable="true" > )
for the image span.span1 ( <span data-scale-ratio="1" class="span1" data-scale-reference=".new-div"> )

So your code looks something like this:

 $('.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"> <span contenteditable="true" 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>

It should solve the problem for you;)

+2
source

He's about the position in the text box, he began to correctly make excuses.

+1
source

Source: https://habr.com/ru/post/1259041/

More articles:


All Articles