jquery draggable事件更改子元素的css
嗨，请看这个代码
$('.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; }
https://jsfiddle.net/felixtm/jaboLc3u/34/
在这种情况下，当我在文本框中键入消息，并resize时，这是正常的。 但是在调整文本大小并拖动文本时，resize的时间框远离div。 为什么这个hapen？
如果希望文本框在拖动时保持其大小，则可以在可拖动组件事件处理程序中删除以下调用：
$(".new-div").css("width", 'auto');
结果代码是：
$(".new-div").draggable({ containment: "#bord" });
在下面的代码片段中，我还更改了span元素的click事件处理程序，以便在用户键入新文本时使文本框保持居中。 为了获得这种行为，我不得不在盒子里放置一个不间断的空间。 由于在单击message后选择了该字符，因此用户键入的新内容将覆盖该字符。
最后，在Chrome中可以看到焦点矩形。 此CSS属性可用于隐藏它：
.new-div:focus { outline: none; }
信用：范围选择的代码灵感来自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; }
我认为主要问题是你在div中输入.closebutton no;）
我不是那么先进，而是完全修复它……
$( '.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; }
移动你的contenteditable="true"属性
div.new-div （
）
至
span.span1 （
所以你的代码看起来像这样……
$('.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; }
它是关于文本框的位置，它开始是正确的。
