我有一些div并且已经应用了resizable&可拖动的方法。但是当我应用可选择的方法时,它不会将“ui-selected”发射到DIV的类中。
请提出解决此问题的方法。
以下是代码: -
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<link href="development-bundle/themes/base/jquery.ui.resizable.css" rel="stylesheet" type="text/css" />
<link href="development-bundle/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.dragClass {
font-family: Tahoma, sans;
color: black;
background: orange;
border: 1px solid orange;
width: 10em;
height:auto;
padding: 0.5em;
}
textarea {
font-family: inherit;
color: inherit;
background: transparent;
border: 0;
width: 100%;
height: 100%;
resize: none;
}
</style>
<script type="text/javascript" language="javascript">
$(function () {
$(".dragImgClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false });
$(".dragClass").draggable({ delay: 100, containment: "#ParentDIV", scroll: false });
$(".dragClass").resizable();
$(".dragClass").selectable();
$(".dragClass").on("click", function (event) {
// Don't do anything if already editing
if ($(this).find("textarea").length) return;
var $this = $(this); //get current obj.
// Replace paragraph with textarea
var $p = $this.find("p");
var $txtar = $('<textarea/>').val($p.text());
$p.replaceWith($txtar);
$txtar.focus();
});
$(".dragClass").on("blur", "textarea", function () {
// Replace textarea with paragraph
var $txtar = $(this);
var $p = $('<p/>').text($txtar.val());
$txtar.replaceWith($p);
});
}); //End of DOM Ready
function getHTML() {
var dv = $('#ParentDIV');
var dvCont = $('#dvHtml');
dvCont.css('border','2px solid red').text(dv.html());
}
</script>
以下是HTML内容: -
<input id="Btn1" type="button" onclick="getHTML();" value="Extract HTML" />
<div id="dvHtml"></div>
<br /><br />
<div id="ParentDIV" style="margin-left:200px; width:800px; height:500px; background:lightgray;">
<div class="dragClass"><p>Drag me around!</p></div>
<br /><br />
<div class="dragClass"><p>Drag me around! also</p></div>
<br /><br />
<img class="dragImgClass" src="logo3.JPG" />
<br /><br />
<img class="dragImgClass" src="logo4.JPG" />
</div>
Here是我的问题的错误
答案 0 :(得分:1)
我可以在firebug中看到你的Selectable div发出正确的css,就像这样"dragClass ui-draggable ui-resizable ui-selectable"
在firebug / IE开发人员工具或其他任何工具中检查它
这是您问题的jsfiddle
我可以看到在firebug中清楚地应用于div的可选类。
修改强>
禁用可拖动的&amp;你可以像
一样调整大小$('.dragclass').draggable( 'disable' );
$('.dragclass').resizable( 'disable' );