搜索
您的当前位置:首页正文

react.js组件实现拖拽复制和可排序的示例代码

2023-12-07 来源:好心意情感网

在实现复制前,对之前的拖拽排序组件属性进行了修改。

  • 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计。
  • 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性。
  • 拖拽复制的效果如下:

    由于实现组件的核心是根据value数据来渲染页面,因此实现拖拽复制功能,只需要在“拖拽释放”的时候,将被拖拽方的数据放到当前目标所在的value数组中即可。

    具体实现代码如下:

    // 当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时 drop(dropedSort, data, sortKey, dropedUid, codeKey, ee) { ee.preventDefault(); const code = ee.dataTransfer.getData("code"); const uId = ee.dataTransfer.getData("uId"); const dragedItem = ee.dataTransfer.getData("item"); const sort = ee.dataTransfer.getData("sort"); if (uId === dropedUid) { if (sort < dropedSort) { data.map(item => { if (item[codeKey] === code) { item[sortKey] = dropedSort; } else if (item[sortKey] > sort && item[sortKey] < dropedSort + 1) { item[sortKey]--; } return item; }); } else { data.map(item => { if (item[codeKey] === code) { item[sortKey] = dropedSort; } else if (item[sortKey] > dropedSort - 1 && item[sortKey] < sort) { item[sortKey]++; } return item; }); } } else if (this.props.isAcceptAdd) { let objDragedItem = JSON.parse(dragedItem); if (data.filter(item => item[codeKey] === objDragedItem[codeKey]).length === 0) { const maxSort = Math.max.apply(Math, data.map(citem => citem[sortKey])); data.map(item => { if (dropedSort === maxSort) { objDragedItem[sortKey] = dropedSort + 1; } else { if (item.sort > dropedSort) { objDragedItem[sortKey] = dropedSort + 1; item[sortKey]++ } } return item }); data.push(objDragedItem) } } this.props.onChange(data) if (ee.target.className.indexOf('droppingContent') !== -1) { ee.target.className = styles.droppedcontent; } }

    这里要注意的有两点:

    第一点是,我通过this.props.isAcceptAdd这个属性来判断当前组件是否允许接受拖拽复制的元素。

    第二点是,我有一个放在内存中的“uId”,这个“uId”在每个拖拽组件初始化的时候生成。这样我就可以通过它来判断,当前被拖拽到目标区域的元素,是组件本身的内部元素还是外部元素,如果是内部就执行排序功能,外部则执行复制的逻辑代码。

    组件API:

    GitHub地址:https://github.com/VicEcho/VDraggable

    小编还为您整理了以下内容,可能对您也有帮助:

    如何使用js实现拖拽功能

    这次给大家带来如何使用js实现拖拽功能,使用js实现拖拽功能的注意事项有哪些,下面就是实战案例,一起来看一下。

    如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。

    1.onmousedown:鼠标按下事件

    2.onmousemove:鼠标移动事件

    3.onmouseup:鼠标抬起事件

    拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然,并不是任何时候移动鼠标都要造成元素的移动,而应该判断鼠标左键的状态是否为按下状态,是否是在可拖拽的元素上按下的。

    基本思路如下:

    拖拽状态 = 0鼠标在元素上按下的时候{

    拖拽状态 = 1

    记录下鼠标的x和y坐标

    记录下元素的x和y坐标

    }

    鼠标在元素上移动的时候{

    如果拖拽状态是0就什么也不做。

    如果拖拽状态是1,那么

    元素y = 现在鼠标y - 原来鼠标y + 原来元素y

    元素x = 现在鼠标x - 原来鼠标x + 原来元素x

    }

    鼠标在任何时候放开的时候{

    拖拽状态 = 0

    }部分实例代码:

    HTML部分

    <p class="calculator" id="drag">**********</p>CSS部分

    calculator {

    position: absolute; /*设置绝对定位,脱离文档流,便于拖拽*/

    display: block;

    width: 218px;

    height: 280px;

    cursor: move; /*鼠标呈拖拽状*/

    }JS部分

    window.onload = function() {

    //拖拽功能(主要是触发三个事件:onmousedownonmousemoveonmouseup)

    var drag = document.getElementById('drag');

    //点击某物体时,用drag对象即可,move和up是全局区域,也就是整个文档通用,应该使用document对象而不是drag对象(否则,采用drag对象时物体只能往右方或下方移动)

    drag.onmousedown = function(e) {

    var e = e || window.event; //兼容ie浏览器

    var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离

    var diffY = e.clientY - drag.offsetTop;

    /*低版本ie bug:物体被拖出浏览器可是窗口外部时,还会出现滚动条,

    解决方法是采用ie浏览器独有的2个方法setCapture()releaseCapture(),这两个方法,

    可以让鼠标滑动到浏览器外部也可以捕获到事件,而我们的bug就是当鼠标移出浏览器的时候,

    超过的功能就失效了。用这个方法,即可解决这个问题。注:这两个方法用于onmousedown和onmouseup中*/

    if(typeof drag.setCapture!='undefined'){

    drag.setCapture();

    }

    document.onmousemove = function(e) {

    var e = e || window.event; //兼容ie浏览器

    var left=e.clientX-diffX;

    var top=e.clientY-diffY;

    //控制拖拽物体的范围只能在浏览器视窗内,不允许出现滚动条

    if(left<0){

    left=0;

    }else if(left >window.innerWidth-drag.offsetWidth){

    left = window.innerWidth-drag.offsetWidth;

    }

    if(top<0){

    top=0;

    }else if(top >window.innerHeight-drag.offsetHeight){

    top = window.innerHeight-drag.offsetHeight;

    }

    //移动时重新得到物体的距离,解决拖动时出现晃动的现象

    drag.style.left = left+ 'px';

    drag.style.top = top + 'px';

    };

    document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动

    this.onmousemove = null;

    this.onmouseup = null; //预防鼠标弹起来后还会循环(即预防鼠标放上去的时候还会移动)

    //修复低版本ie bug

    if(typeof drag.releaseCapture!='undefined'){

    drag.releaseCapture();

    }

    };

    };

    };相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

    推荐阅读:

    vue做出手机发送短信验证码注册功能

    如何使用Angular上线一个组件

    基于react-grid-layout实现可视化拖拽

    做前端的小伙伴们可能会经常遇到做一个自定义dashboard这样的需求。
    那么什么是自定义dashboard呢?自定义dashboard其实就是一个自定义面板,用户能够在面板上自由的拖拽,新增,删除组件。组件可以是各种echarts图形,也可是各种数据表格。通过各个组件的拖拽组合,从而让用户自定义想要看到的面板。

    demo地址
    源码地址

    首先,在js文件中引入WidthProvider和Responsive组件,并且实例化响应式拖拽组件。
    其次,在css文件中引入插件的样式。

    在React的render方法中渲染可拖拽布局。ResponsiveReactGridLayout组件有多个属性,这里举几个比较重要的说明一下:

    通过generateDOM函数生成布局中的组件,首先先遍历组件数组,通过每个组件的类型判断生产柱状图组件,折线组件,还是饼图组件。每个组件必须定义一个全局唯一的key值。data-grid为每一个组件绑定了其属性。下面会介绍具体的data-grid属性。

    每个组件属性如下:

    感谢支持。若不足之处,欢迎大家指出,共勉。

    如果觉得不错,记得 点赞,谢谢大家😂

    基于react-grid-layout实现可视化拖拽

    做前端的小伙伴们可能会经常遇到做一个自定义dashboard这样的需求。
    那么什么是自定义dashboard呢?自定义dashboard其实就是一个自定义面板,用户能够在面板上自由的拖拽,新增,删除组件。组件可以是各种echarts图形,也可是各种数据表格。通过各个组件的拖拽组合,从而让用户自定义想要看到的面板。

    demo地址
    源码地址

    首先,在js文件中引入WidthProvider和Responsive组件,并且实例化响应式拖拽组件。
    其次,在css文件中引入插件的样式。

    在React的render方法中渲染可拖拽布局。ResponsiveReactGridLayout组件有多个属性,这里举几个比较重要的说明一下:

    通过generateDOM函数生成布局中的组件,首先先遍历组件数组,通过每个组件的类型判断生产柱状图组件,折线组件,还是饼图组件。每个组件必须定义一个全局唯一的key值。data-grid为每一个组件绑定了其属性。下面会介绍具体的data-grid属性。

    每个组件属性如下:

    感谢支持。若不足之处,欢迎大家指出,共勉。

    如果觉得不错,记得 点赞,谢谢大家😂

    js怎么实现一个拖拽事件

    Javascript的特点是dom的处理与网页效果,大多数情况我们只用到了这个语言的最简单的功能,比如制作图片轮播/网页的tab等等,这篇文章将向你展示如何在自己的网页上制作拖拽.

    有很多理由让你的网站加入拖拽功能,最简单的一个是数据重组.例如:你有一个序列的内容让用户排序,用户需要给每个条目进行输入或者用select 选择,替代前面这个方法的就是拖拽.或许你的网站也需要一个用户可以拖动的导航窗口!那么这些效果都是很简单:因为你可以很容易的实现!

    网页上实现拖拽其实也不是很复杂.第一你需要知道鼠标坐标,第二你需要知道用户鼠标点击一个网页元素并实现拖拽,最后我们要实现移动这个元素.

    获取鼠标移动信息

    第一我们需要获取鼠标的坐标.我们加一个用户函数到document.onmousemove就可以了:

    Java代码 收藏代码

    document.onmousemove = mouseMove;

    function mouseMove(ev){

    ev = ev || window.event;

    var mousePos = mouseCoords(ev);

    }

    function mouseCoords(ev){

    if(ev.pageX || ev.pageY){

    return {x:ev.pageX, y:ev.pageY};

    }

    return {

    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

    y:ev.clientY + document.body.scrollTop - document.body.clientTop

    };

    }

    你首先要声明一个evnet对象.不论何时你移动鼠标/点击/按键等等,会对应一个event的事件.在Internet Explorer里event是全局变量,会被存储在window.event里. 在firefox中,或者其他浏览器,event事件会被相应的自定义函数获取.当我们将mouseMove函数赋值于document.onmousemove,mouseMove会获取鼠标移动事件.

    (ev = ev || window.event) 这样让ev在所有浏览器下获取了event事件,在Firefox下"||window.event"将不起作用,因为ev已经有了赋值.在MSIE下ev是空的,所以ev将设置为window.event.

    因为我们在这篇文章中需要多次获取鼠标坐标,所以我们设计了mouseCoords这个函数,它只包含了一个参数,就是the event.

    我们需要运行在MSIE与Firefox为首的其他浏览器下.Firefox以event.pageX和event.pageY来代表鼠标相应于文档左上角的位置.如果你有一个500*500的窗口,而且你的鼠标在正中间,那么paegX和pageY将是250,当你将页面往下滚动500px,那么 pageY将是750.此时pageX不变,还是250.

    MSIE和这个相反,MSIE将event.clientX与event.clientY来代表鼠标与ie窗口的位置,并不是文档.当我们有一个 500*500的窗口,鼠标在正中间,那么clientX与clientY也是250,如果你垂直滚动窗口到任何位置,clientY仍然是250,因为相对ie窗口并没有变化.想得到正确的结果,我们必须加入scrollLeft与scrollTop这两个相对于文档鼠标位置的属性.最后,由于MSIE 并没有0,0的文档起始位置,因为通常会设置2px的边框在周围,边框的宽度包含在document.body.clientLeft与 clientTop这两个属性中,我们再加入这些到鼠标的位置中.

    很幸运,这样mouseCoords函数就完成了,我们不再为坐标的事操心了.

    捕捉鼠标点击

    下次我们将知道鼠标何时点击与何时放开.如果我们跳过这一步,我们在做拖拽时将永远不知道鼠标移动上面时的动作,这将是恼人的与违反直觉的.

    这里有两个函数帮助我们:onmousedown与onmouseup.我们预先设置函数来接收document.onmousemove,这样看起来很象我们会获取document.onmousedown与document.onmouseup.但是当我们获取 document.onmousedown时,我们同时获取了任何对象的点击属性如:text,images,tables等等.我们只想获取那些需要拖拽的属性,所以我们设置函数来获取我们需要移动的对象.

    移动一个元素

    我们知道了怎么捕捉鼠标移动与点击.剩下的就是移动元素了.首先,要确定一个明确的页面位置,css样式表要用'absolute'.设置元素绝对位置意味着我们可以用样式表的.top和.left来定位,可以用相对位置来定位了.我们将鼠标的移动全部相对页面top-left,基于这点,我们可以进行下一步了.

    当我们定义item.style.position='absolute',所有的操作都是改变left坐标与top坐标,然后它移动了.

    Java代码 收藏代码

    document.onmousemove = mouseMove;

    document.onmouseup = mouseUp;

    var dragObject = null;

    var mouseOffset = null;

    function getMouseOffset(target, ev){

    ev = ev || window.event;

    var docPos = getPosition(target);

    var mousePos = mouseCoords(ev);

    return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};

    }

    function getPosition(e){

    var left = 0;

    var top = 0;

    while (e.offsetParent){

    left += e.offsetLeft;

    top += e.offsetTop;

    e = e.offsetParent;

    }

    left += e.offsetLeft;

    top += e.offsetTop;

    return {x:left, y:top};

    }

    function mouseMove(ev){

    ev = ev || window.event;

    var mousePos = mouseCoords(ev);

    if(dragObject){

    dragObject.style.position = 'absolute';

    dragObject.style.top = mousePos.y - mouseOffset.y;

    dragObject.style.left = mousePos.x - mouseOffset.x;

    return false;

    }

    }

    function mouseUp(){

    dragObject = null;

    }

    function makeDraggable(item){

    if(!item) return;

    item.onmousedown = function(ev){

    dragObject = this;

    mouseOffset = getMouseOffset(this, ev);

    return false;

    }

    }

    你会注意到这个代码几乎是前面的全集,将前面的合在一起就实现了拖拽效果了.

    当我们点击一个item时,我们就获取了很多变量,如鼠标位置,鼠标位置自然就包含了那个item的坐标信息了.如果我们点击了一个20*20px图像的正中间,那么鼠标的相对坐标为{x:10,y:10}.当我们点击这个图像的左上角那么鼠标的相对坐标为 {x:0,y:0}.当我们点击时,我们用这个方法取得一些鼠标与图片校对的信息.如果我们不能加载页面item,那么信息将是document信息,会忽略了点击的item信息.

    mouseOffset函数使用了另一个函数getPosition.getPosition的作用是返回 item相对页面左上角的坐标,如果我们尝试获取item.offsetLeft或者item.style.left,那么我们将取得item相对与父级的位置,不是整个document.所有的脚本我们都是相对整个document,这样会更好一些.

    为了完成getPosition任务,必须循环取得item的父级,我们将加载内容到item的左/上的位置.我们需要管理想要的top与left列表.

    自从定义了mousemove这个函数,mouseMove就会一直运行.第一我们确定item的 style.position为absolute,第二我们移动item到前面定义好的位置.当mouse点击被释放,dragObject被设置为 null,mouseMove将不在做任何事.

    Dropping an Item

    前面的例子目的很简单,就是拖拽item到我们希望到的地方.我们经常还有其他目的如删除item,比如我们可以将item拖到垃圾桶里,或者其他页面定义的位置.

    很不幸,我们有一个很大的难题,当我们拖拽,item会在鼠标之下,比如mouseove,mousedown,mouseup或者其他mouse action.如果我们拖拽一个item到垃圾桶上,鼠标信息还在item上,不在垃圾桶上.

    怎么解决这个问题呢?有几个方法可以来解决.第一,这是以前比较推荐的,我们在移动鼠标时item会跟随鼠标,并占用了mouseover/mousemove等鼠标事件,我们不这样做,只是让item跟随着鼠标,并不占用mouseover等鼠标事件,这样会解决问题,但是这样并不好看,我们还是希望item能直接跟在mouse下.

    另一个选择是不做item的拖拽.你可以改变鼠标指针来显示需要拖拽的item,然后放在鼠标释放的位置.这个解决方案,也是因为美学原因不予接受.

    最后的解决方案是,我们并不去除拖拽效果.这种方法比前两种繁杂许多,我们需要定义我们需要释放目标的列表,当鼠标释放时,手工去检查释放的位置是否是在目标列表位置上,如果在,说明是释放在目标位置上了.

    Java代码 收藏代码

    /*

    All code from the previous example is needed with the exception

    of the mouseUp function which is replaced below

    */

    var dropTargets = [];

    function addDropTarget(dropTarget){

    dropTargets.push(dropTarget);

    }

    function mouseUp(ev){

    ev = ev || window.event;

    var mousePos = mouseCoords(ev);

    for(var i=0; i<dropTargets.length; i++){

    var curTarget = dropTargets[i];

    var targPos = getPosition(curTarget);

    var targWidth = parseInt(curTarget.offsetWidth);

    var targHeight = parseInt(curTarget.offsetHeight);

    if(

    (mousePos.x > targPos.x) &&

    (mousePos.x < (targPos.x + targWidth)) &&

    (mousePos.y > targPos.y) &&

    (mousePos.y < (targPos.y + targHeight))){

    // dragObject was dropped onto curTarget!

    }

    }

    dragObject = null;

    }

    鼠标释放时会去取是否有drop属性,如果存在,同时鼠标指针还在drop的范围内,执行drop操作.我们检查鼠标指针位置是否在目标范围是用(mousePos.x>targetPos.x),而且还要符合条件(mousePos.x<(targPos.x + targWidth)).如果所有的条件符合,说明指针确实在范围内,可以执行drop指令了.

    Pulling It All Together

    最后我们拥有了所有的drag/drop的脚本片断!下一个事情是我们将创建一个DOM处理.

    下面的代码将创建container(容器),而且使任何一个需要drag/drop的item变成一个容器的item.代码在这个文章第二个demo的后面,它可以用户记录一个list(列表),定为一个导航窗口在左边或者右边,或者更多的函数你可以想到的.

    下一步我们将通过"假代码"让reader看到真代码,下面为推荐:

    1、当document第一次载入时,创建dragHelper DIV.dragHelper将给移动的item加阴影.真实的item没有被dragged,只是用了insertBefor和appendChild来移动了,我们隐藏了dragHelper

    2、有了mouseDown与mouseUp函数.所有的操作会对应到当到iMouseDown的状态中,只有当mouse左键为按下时iMouseDown才为真,否则为假.

    3、我们创建了全局变量DragDrops与全局函数CreateDragContainer.DragDrops包含了一系列相对彼此的容器.任何参数(containers)将通过CreatedcragContainer进行重组与序列化,这样可以自由的移动.CreateDragContainer函数也将item进行绑定与设置属性.

    4、现在我们的代码知道每个item的加入,当我们移动处mouseMove,mouseMove函数首先会设置变量target,鼠标移动在上面的item,如果这个item在容器中(checked with getAttribute):

    * 运行一小段代码来改变目标的样式.创造rollover效果

    * 检查鼠标是否没有放开,如果没有

    o 设置curTarget代表当前item

    o 记录item的当前位置,如果需要的话,我们可以将它返回

    o 克隆当前的item到dragHelper中,我们可以移动带阴影效果的item.

    o item拷贝到dragHelper后,原有的item还在鼠标指针下,我们必须删除掉dragObj,这样脚本起作用,dragObj被包含在一个容器中.

    o 抓取容器中所有的item当前坐标,高度/宽度,这样只需要记录一次,当item被drag时,每随mouse移动,每移钟就会记录成千上万次.

    * 如果没有,不需要做任何事,因为这不是一个需要移动的item

    5、检查curTarget,它应该包含一个被移动的item,如果存在,进行下面操作:

    * 开始移动带有阴影的item,这个item就是前文所创建的

    * 检查每个当前容器中的container,是否鼠标已经移动到这些范围内了

    o 我们检查看一下正在拖动的item是属于哪个container

    o 放置item在一个container的某一个item之前,或者整个container之后

    o 确认item是可见的

    * 如果鼠标不在container中,确认item是不可见了.

    js如何实现数组排序和反转呢?

    在 JavaScript 中,可以使用 sort() 方法对数组进行排序,可以使用 reverse() 方法将数组元素反转。

    以下是示例代码:

    需要注意的是,sort() 方法和 reverse() 方法会修改原数组,如果需要保留原数组,需要先对其进行拷贝。

    本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

    热门图文

    • 戏赠张叔甫黄庭坚的其他诗词有哪些

      《戏赠张叔甫》黄庭坚其他诗词:《秋怀二首》、《登快阁》、《诉衷情》、《虞美人宜州见梅作》、《寄黄几复》。《戏赠张叔甫》黄庭坚其他诗词:《秋怀二首》、《登快阁》、《诉衷情》、《虞美人宜州见梅作》、《寄黄几复》。作者:黄庭坚。年代:宋代。我们为您从以下几个方面提供戏赠张叔甫的详细介绍。一、《戏赠张叔甫》的全文 点此查看《戏赠张叔甫》的详细内容。团扇复团扇,因风托方便。衔泥巢君屋,双燕令人羡。张公子,时相见。张公一生江海客,文章献纳麒麟殿。文采风流今尚存,看君不合长贫贱。醉中往往爱逃禅,解道澄江静如练。淮南百宗经行处,携手落日回高宴。城上乌,尾毕逋。尘沙立暝途,惟有摩尼珠。云梦泽南州,更有赤须胡。与君歌一曲,长铗归来乎。出无车,食无鱼。不须闻此意惨怆,幸是元无免破除。脱吾帽,向君笑。

    • 戏赠张叔甫黄庭坚的其他诗词

      《戏赠张叔甫》黄庭坚其他诗词:《秋怀二首》、《登快阁》、《诉衷情》、《虞美人宜州见梅作》、《寄黄几复》。《戏赠张叔甫》黄庭坚其他诗词:《秋怀二首》、《登快阁》、《诉衷情》、《虞美人宜州见梅作》、《寄黄几复》。作者:黄庭坚。年代:宋代。我们为您从以下几个方面提供戏赠张叔甫的详细介绍。一、《戏赠张叔甫》的全文 点此查看《戏赠张叔甫》的详细内容。团扇复团扇,因风托方便。衔泥巢君屋,双燕令人羡。张公子,时相见。张公一生江海客,文章献纳麒麟殿。文采风流今尚存,看君不合长贫贱。醉中往往爱逃禅,解道澄江静如练。淮南百宗经行处,携手落日回高宴。城上乌,尾毕逋。尘沙立暝途,惟有摩尼珠。云梦泽南州,更有赤须胡。与君歌一曲,长铗归来乎。出无车,食无鱼。不须闻此意惨怆,幸是元无免破除。脱吾帽,向君笑。

    • 戏赠张叔甫黄庭坚其他诗词

      《戏赠张叔甫》黄庭坚其他诗词:《秋怀二首》、《登快阁》、《诉衷情》、《虞美人宜州见梅作》、《寄黄几复》。《戏赠张叔甫》黄庭坚其他诗词:《秋怀二首》、《登快阁》、《诉衷情》、《虞美人宜州见梅作》、《寄黄几复》。作者:黄庭坚。年代:宋代。我们为您从以下几个方面提供戏赠张叔甫的详细介绍。一、《戏赠张叔甫》的全文 点此查看《戏赠张叔甫》的详细内容。团扇复团扇,因风托方便。衔泥巢君屋,双燕令人羡。张公子,时相见。张公一生江海客,文章献纳麒麟殿。文采风流今尚存,看君不合长贫贱。醉中往往爱逃禅,解道澄江静如练。淮南百宗经行处,携手落日回高宴。城上乌,尾毕逋。尘沙立暝途,惟有摩尼珠。云梦泽南州,更有赤须胡。与君歌一曲,长铗归来乎。出无车,食无鱼。不须闻此意惨怆,幸是元无免破除。脱吾帽,向君笑。

    • 紴字的组词 紴字的组词有哪些

      紴字的组词 紴字的组词有哪些。麻紴、;紴的笔顺是撇折、撇折、点、点、点、点、横撇。紴字的笔顺图解;共十一画;紴;1;撇折;2;撇折;3;点;4;点;5;点;6;点;7;横撇;8;撇;9;竖;10;横撇;11;捺;紴的拼音为bō,部首为糹,结构为左右,注音为ㄅㄛ,ㄅㄧˋ。紴字的具体字的具体解释是什么呢,我们通过以下几个方面为您介绍。一、基本解释 点此查看紴的详细内容。[ bō ]1.绦属。2.锦类。3.水波锦文。[ bì ]1.装束貌。二、康熙字典;紴【未集中】【糸部】 康熙筆画:11画,部外筆画:5画《廣韻》博禾切《集韻》逋禾切。音波。《說文》絛屬。又《集韻》匹靡切,音帔。《玉篇》水紴錦文也。又《集韻》平義切,音被。《類篇》裝束貌。三、说文解字;

    • 戏赠张叔甫相同朝代诗歌 戏赠张叔甫相同朝代诗歌有哪些

      《戏赠张叔甫》黄庭坚相同朝代诗词。《曹将军》、《下瞿塘》、《滕王阁》、《儿馁嗔郎罢妻寒怨藁砧唐眉山诗也戏为笺之》、《题艾溪》、《废贡院为米廪过之值盘厫》、《送客至灵谷》、《叹屩词》、《题陈朝玉爱竹轩》、《酬春湖史履庸惠四皓图》。《戏赠张叔甫》相同朝代的诗词:《曹将军》、《下瞿塘》、《滕王阁》、《儿馁嗔郎罢妻寒怨藁砧唐眉山诗也戏为笺之》、《题艾溪》、《废贡院为米廪过之值盘厫》、《送客至灵谷》、《叹屩词》、《题陈朝玉爱竹轩》、《酬春湖史履庸惠四皓图》作者:黄庭坚。年代:宋代。我们为您从以下几个方面提供戏赠张叔甫的详细介绍。一、《戏赠张叔甫》的全文 点此查看《戏赠张叔甫》的详细内容。团扇复团扇,因风托方便。衔泥巢君屋,双燕令人羡。张公子,时相见。张公一生江海客,文章献纳麒麟殿。

    Top