使用jquery在div中添加，resize，定位，颜色更改文本
我期待创建一种非常简单的方法，允许用户在
编写，resize，定位或更改文本的颜色。 我知道jQuery一点点。
我的HTML
Testing
这里.canvas是一个
，有时它包含一个图像或另一种背景颜色。 我已经编写代码来改变
的颜色和背景图像。 我需要的是用户可以非常容易地输入文本，他可以按照自己的意愿设置样式 。 请看图片 ：
这张图片我从mailchimp中捕获。 在mailchimp中，当我们创建模板设计时，它将提供我想要的相同的东西。 在这里用户可以添加文本，他可以旋转文本，更改字体系列，颜色等。
实际上是颜色和字体系列的东西，我知道如何用jquery做这个。但是我认为文本div的旋转很复杂。 怎么做这个轮换 ？
在这里，我不是要求代码，但我希望看到一个有用的演示，帮助我理解工作和学习jQuery。 请任何人都可以为这项工作提供样本，或建议任何免费的jQuery插件或基本代码。
我从jsfiddle找到了这个。 让我们从头开始，开始扩展您的function
HTML
Resize Me
使用Javascript：
$('.resizable').resizable({ handles: { 'nw': '.ui-resizable-nw', 'ne': '.ui-resizable-ne', 'sw': '.ui-resizable-sw', 'se': '.ui-resizable-se', 'n': '.ui-resizable-n', 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'w': '.ui-resizable-w' } }); $( '.draggable' ).draggable().on('click', function(){ if ( $(this).is('.ui-draggable-dragging') ) { return; } else { $(this).draggable( 'option', 'disabled', true ); $(this).prop('contenteditable','true'); $(this).css('cursor', 'text'); } }) .on('blur', function(){ $(this).draggable( 'option', 'disabled', false); $(this).prop('contenteditable','false'); $(this).css('cursor', 'move'); });
CSS：
.draggable { cursor: move; } .resizable { border: 1px dashed #000000; position: relative; min-height: 50px; } .ui-resizable-handle { width: 10px; height: 10px; background-color: #ffffff; border: 1px solid #000000; position: absolute; } .ui-resizable-nw { left: -5px; top: -5px; cursor: nw-resize; } .ui-resizable-ne { top: -5px; right: -5px; cursor: ne-resize; } .ui-resizable-sw { bottom: -5px; left: -5px; cursor: sw-resize; } .ui-resizable-se { bottom: -5px; right:-5px; cursor: se-resize; } .ui-resizable-n { top: -5px; left:50%; cursor: n-resize; } .ui-resizable-s { bottom: -5px; left: 50%; cursor: s-resize; } .ui-resizable-w { left:-5px; top:calc(50% - 5px); cursor: w-resize; } .ui-resizable-e { right:-5px; top:calc(50% - 5px); cursor: e-resize; }
你需要的是http://jqueryrotate.com/与其他function相结合。
这个例子应该改进，但你有这个function：
- 旋转
- 关
- 编辑
- Dragg
- resize（textarea）
关于这个例子的一些注释 。
– 旋转由jqueryrotate.com库完成。 在这个例子中，我使用0,0位置来计算角度，但是应该进行改进以使角度朝向textarea以获得更好的用户体验。
– textarea可编辑支持resize和编辑function，这将很好地完成工作，因为resize时，它会自动调整其父包装器的大小，此处不需要额外的代码。
– jquery.ui支持Drag，（在旋转时禁用拖动会很有用，在这种情况下只需要添加一个标志）。
//initial rotation, just for test //$(".wrapper").rotate(-45); //let's add draggable functionality $( function() { $( ".wrapper" ).draggable(); } ); //close button action document.getElementById('close').onclick = function() { this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false; }; //rotate button action var rotate = $('#rotate') var dragging = false; rotate.mousedown(function() { dragging = true }) $(document).mouseup(function() { dragging = false }) $(document).mousemove(function(e) { if (dragging) { var mouse_x = e.pageX / 2; var mouse_y = e.pageY / 2; var radians = Math.atan2(mouse_x - 10, mouse_y - 10); var degree = (radians * (180 / Math.PI) * -1) + 90; $(".wrapper").rotate(degree); } })
.wrapper { display: inline-block; position:relative; border: dotted 1px #ccc; } #close { float:left; display:inline-block; padding:2px 5px; background:#ccc; } #rotate { position: absolute; display: inline-block; background-image:url(http://sofzh.miximages.com/javascript/rotate_right.png); background-repeat: no-repeat; background-size: contain; width: 20px; height: 20px; bottom: -10px; right: -10px; } textarea { margin:15px; }
x
要旋转div，您可以采用多种方式进行。 理想情况下，它应该像下面链接中解释的那样实现，它将在所有浏览器中支持。 如何使用jQuery旋转div
希望这可以帮助！！！