及时编辑，jquery 实现

最新推荐文章于 2024-06-14 15:02:13 发布

chiyuanxian3951

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量99

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/internetafei/blog/3069182

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

.judge{
border-bottom: 5px solid red;
cursor: n-resize;
}

</style>
<script type="text/javascript">
function aa(a,b,c){
   a=this
   if($(a).data("ddTimes")==1){
       $(a).data("ddTimes",0)
       return ;
   }
   if( $(a).data("edit")==false){
       $(a).data("edit",true)
       var val=$(a).html( )
       var child=$(a).children();
       $(a).html( "")
       var editor=$(a).attr("editor")
if(editor=="input"){
   $("<input />").val(val).on("blur",function(){
           var val=$(this).val();
           $(this).remove()
           $(a).data("edit",false)
           $(a).html(val)
       } ).appendTo($(a)).focus()
}else if (editor=="rich") {
   $("<textarea id='mytextarea'> </textarea>").html(val).on("blur",function(){

       } ).appendTo($(a)).focus()
   tinymce.init({
           selector: '#mytextarea',
           setup:function (editor) {
               editor.on('focus',function(){
               })
               editor.on('blur',function(){
                   var val=tinymce.get('mytextarea').getContent();
                   $(a).empty();
                   $(a).html( val)
                   $(a).data("edit",false)
               })
           }
           });
       }




   }
   // $("#zhangsan").html('');
}
function load(){
   $("[editor]").data("edit",false)
$("[editor]").each(function(i,item){
   $(item).on("click", aa)
} )
$("[dd]").each(function(i,item){
   var allowDd=false;//是否可以拖动
   var dragSrcY=0;
   var dragtargetY=0;
   $(item).data("ddTimes",0) //判断当拖拽次数为2时
   $(item).on("mousedown",function(e){
               if (allowDd) {
               dragSrcY= e.pageY;
               //$(item).css('overflow','hidden');
               $(item).data("ddTimes",1)
                       }
               e.stopPropagation();
                       return false;
   }
   )
   $(item).on("mousemove",function(e){
       //得到div 底部线的位置
                   var bottomHeight= $(item).offset().top+ $(item).height();
                   console.log("bottomHeight"+bottomHeight)
                           console.log("e.pageY"+e.pageY)
                   if ( e.pageY > ( bottomHeight-10) && e.pageY < (bottomHeight+10 )) {
                       $(item).attr("class", "txt judge" )
                       allowDd=true
                       dragtargetY=e.pageY;
                       if (dragSrcY>0) {
                           $(item).height( $(item).height()+(dragtargetY-dragSrcY ) )
                               }
                           }else{
                               $(item).attr("class", "txt" )
                               allowDd=false
                           }
   }
   )
   $(item).on("mouseout",function(e){
       //清理鼠标拖动的垃圾数据
       dragSrcY=0;
                   dragtargetY=0;
                   $(item).attr("class", "txt" )
                   $(item).data("ddTimes",0)
                           allowDd=false
   }
   )
   $(item).on("mouseup",function(e){
               if (dragSrcY>0) {
                       $(item).height( $(item).height()+(dragtargetY-dragSrcY ) )
                       }
               dragSrcY=0;
               dragtargetY=0;
       //清理鼠标拖动的垃圾数据
                   $(item).attr("class", "txt" )
   }
   )




})


/* tinymce.init({
   selector: '#mytextarea'
   }); */
}

</script>
</head>
<body οnlοad="load()">

   <table>
       <tr>
           <td>張三</td>
           <td editor="input">李四</td>
       </tr>
       <tr>
           <td>張三</td>
           <td editor="input">李四</td>
       </tr>
       <tr>
           <td>張三</td>
           <td editor="input">李 </td>
       </tr>
       <tr>
           <td>工商</td>
           <td >
           <div>
               <div editor="rich" dd class="txt">
                   Hello, World!
               </div>
           </div>
           </td>
       </tr>
   </table>
<button>ss</button>

</body>
</html>

转载于:https://my.oschina.net/internetafei/blog/3069182

chiyuanxian3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
及时编辑，jquery 实现

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="styleshee...
复制链接

扫一扫