http://liveweave.com/iAEThw
http://jsbin.com/UXAhuki/1/edit
select 要素の div、text、remove には 3 つのオプションがあります。
ここで、div が選択されると、IntDraw 関数が呼び出されると述べています。
if ($(this).val() === 'div') {
$('#divoptions').show();
$('#spanoptions').hide();
// No Background Option
$('#nobg').click(function() {
$('input[name=bgcolor]').val('none');
});
IntDraw();
code.val(preview.html());
}
ただし、他のオプションを選択しても、関数がまだ呼び出されていることを意味する div を描画できます。
考えられることはすべて試しましたが、これを修正できないようです。どんな助けでも大歓迎です。
これが描画機能です...
var enabled = true;
function IntDraw() {
if(enabled === true) {
setMousePosition = function(e) {
var ev = e || window.event; //Moz || IE
if (ev.pageX) { //Moz
mouse.y = ev.pageY + window.pageYOffset;
mouse.x = ev.pageX + window.pageXOffset;
} else if (ev.clientX) { //IE
mouse.y = ev.clientY + document.body.scrollTop;
mouse.x = ev.clientX + document.body.scrollLeft;
}
}
var mouse = {
x: 0,
y: 0,
startX: 0,
startY: 0
};
var element = null;
canvas.onmousemove = function(e) {
setMousePosition();
if (element !== null) {
var bcolor = $('input[name=bcolor]').val(),
bgcolor = $('input[name=bgcolor]').val(),
divborderstyle = $('#divborderstyle').val(),
divborder = $('#divborder').val();
element.style.position = 'absolute';
element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
element.style.width = Math.abs(mouse.x - mouse.startX) + '%';
element.style.height = Math.abs(mouse.y - mouse.startY) + '%';
element.style.border = divborder + ' ' + divborderstyle + ' ' + bcolor;
element.style.background = bgcolor;
element.style.overflow = 'auto';
}
};
canvas.onmousedown = function(e) {
if (element !== null) {
element = null;
canvas.style.cursor = "default";
console.log("finsihed.");
} else {
console.log("begun.");
mouse.startY = mouse.y;
mouse.startX = mouse.x;
element = document.createElement('div');
element.className = 'rect';
element.style.top = mouse.y + '%';
element.style.left = mouse.x + '%';
canvas.appendChild(element);
canvas.style.cursor = "crosshair";
}
};
canvas.onmouseup = function(e) {
element = null;
canvas.style.cursor = "default";
console.log("finsihed.");
code.val(preview.html());
};
}
else {
enabled = false;
}
}