jquery draggable事件改变子元素的CSS [英] jquery draggable event changing the css of child element
问题描述
您好,请参阅此代码
$('.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/
在这里,当我在文本框中键入消息,并调整大小的时间,这是工作正常。但在调整文本大小后,拖动文本,时间调整大小框远离div。为什么这个hapen?
In this when i type message on text box , and resize that time this is working correctly . But after resize the text and drag the text that time resize box is going far from the div . Why this hapen ?
推荐答案
如果希望文本框在拖动时保持其大小,可以删除拖动组件中的以下调用事件处理程序:
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');
生成的代码为:
$(".new-div").draggable({
containment: "#bord"
});
在下面的代码片段中,我也修改了 span
元素,以在用户键入新文本时保持文本框居中。为了得到这种行为,我不得不在盒子里放一个不间断的空间。由于该字符是在点击消息
之后选择的,所以用户键入的新内容将覆盖它。
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.
,则Chrome中会显示焦点矩形。此CSS属性可用于隐藏它:
Finally, a focus rectangle was visible in Chrome. This CSS attribute can be used to hide it:
.new-div:focus {
outline: none;
}
信用:范围选择的代码的灵感来自此回答由 Tim Down 提供。
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>
这篇关于jquery draggable事件改变子元素的CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!