如果要实现1*2 或者 2*1 以及 n*n 等尺寸的会不会很麻烦？

[satifanie]

你好， 看了这个组件非常有意思。我想到一个更复杂的场景，就是卡片尺寸为12 、13 或者2*2 这种特殊的卡片，混排的情况下，是不是不能实现拖动了，因为这样，卡片的拖动带来的重新计算排序估计非常复杂。。

[dwanda]

不好意思现在才回你..我邮箱太多垃圾邮件了被淹没了。我不是很懂你的场景是什么意思..但是我觉得你可以看看vue-grid-layout这个库实现你更复杂的需求。

------------------ 原始邮件 ------------------ 发件人: "Lei Duan"<notifications@github.com>; 发送时间: 2019年11月3日(星期天) 下午2:49 收件人: "dwanda/dragComponent"<dragComponent@noreply.github.com>; 抄送: "Subscribed"<subscribed@noreply.github.com>; 主题: [dwanda/dragComponent] 如果要实现12 或者 21 以及 n*n 等尺寸的会不会很麻烦？ (#1)

你好， 看了这个组件非常有意思。我想到一个更复杂的场景，就是卡片尺寸为12 、13 或者2*2 这种特殊的卡片，混排的情况下，是不是不能实现拖动了，因为这样，卡片的拖动带来的重新计算排序估计非常复杂。。

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[ccyzz]

你好，怎样可以让整个卡片可以拖动

[dwanda]

不懂你在说什么

------------------ 原始邮件 ------------------ 发件人: "ccyzz"<notifications@github.com>; 发送时间: 2019年11月21日(星期四) 中午1:29 收件人: "dwanda/dragComponent"<dragComponent@noreply.github.com>; 抄送: "宇达"<huangyuda13@qq.com>; "Comment"<comment@noreply.github.com>; 主题: Re: [dwanda/dragComponent] 如果要实现12 或者 21 以及 n*n 等尺寸的会不会很麻烦？ (#1)

你好，怎样可以让整个卡片可以拖动

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ccyzz]

现在拖拽事件不是只有点击标题栏部分才可以触发嘛，我的意思是点击卡片任意部分都可以触发拖拽

[dwanda]

我当时的想法是用户说不定还需要对卡片内容还要有交互，所以只在标题弄了拖拽。你可以改一下源码，不难的。

------------------ 原始邮件 ------------------ 发件人: "ccyzz"<notifications@github.com>; 发送时间: 2019年11月21日(星期四) 下午2:15 收件人: "dwanda/dragComponent"<dragComponent@noreply.github.com>; 抄送: "宇达"<huangyuda13@qq.com>; "Comment"<comment@noreply.github.com>; 主题: Re: [dwanda/dragComponent] 如果要实现12 或者 21 以及 n*n 等尺寸的会不会很麻烦？ (#1)

现在拖拽事件不是只有点击标题栏部分才可以触发嘛，我的意思是点击卡片任意部分都可以触发拖拽

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ccyzz]

好的，谢谢！我在标题自定义slot的时候报错"slotProps" is not defined，Cannot read property 'item' of undefined"请问可能是什么原因。 `<cardDragger :data="componentData" @finishDrag="finishDrag">

</cardDragger>`

data里面也定义了数据 data() { return { componentData: [ { positionNum: 1, name: "演示卡片1", id: "card1", componentData:exampleChild, }, { positionNum: 2, name: "演示卡片2", id: "card2", componentData:exampleChild, }, { positionNum: 3, name: "演示卡片3", id: "card3", componentData:exampleChild, }, { positionNum: 4, name: "演示卡片4", id: "card4", componentData:exampleChild }, ], } }, 我完全是按照你的demo来写的，不知道是不是哪里写错了

[dwanda]

这样看我也看不出来哪错了。有可能是vue版本太低了。我的demo没问题的，好几个人反馈过了

------------------ 原始邮件 ------------------ 发件人: "ccyzz"<notifications@github.com>; 发送时间: 2019年11月21日(星期四) 下午2:21 收件人: "dwanda/dragComponent"<dragComponent@noreply.github.com>; 抄送: "宇达"<huangyuda13@qq.com>; "Comment"<comment@noreply.github.com>; 主题: Re: [dwanda/dragComponent] 如果要实现12 或者 21 以及 n*n 等尺寸的会不会很麻烦？ (#1)

好的，谢谢！我在标题自定义slot的时候报错"slotProps" is not defined，Cannot read property 'item' of undefined"请问可能是什么原因。 <cardDragger :data="componentData" @finishDrag="finishDrag"> <template v-slot:header="slotProps"> <div class="topMenuBox" > <div class="menuTitle" v-if="slotProps.item.name">{{slotProps.item.name}}</div> <div class="menuTitle" v-else> 默认标题 </div> <div class="dotBox"> <div class="circleDot"></div> <div class="circleDot"></div> <div class="circleDot"></div> </div> </div> </template> </cardDragger> data里面也定义了数据 data() { return { componentData: [ { positionNum: 1, name: "演示卡片1", id: "card1", componentData:exampleChild, }, { positionNum: 2, name: "演示卡片2", id: "card2", componentData:exampleChild, }, { positionNum: 3, name: "演示卡片3", id: "card3", componentData:exampleChild, }, { positionNum: 4, name: "演示卡片4", id: "card4", componentData:exampleChild }, ], } }, 我完全是按照你的demo来写的，不知道是不是哪里写错了

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ccyzz]

我git clone你的demo也没问题，就是我把cardDragger引入到我自己的项目中时就报错了。slotProps是固定的字段吗，我想可能是我没有定义，所以报错了。我目前用的vue2.0，是需要最新的vue版本才可以吗

[dwanda]

对。你2.0只能用组件传进去，不能用slotProps。我在文章都有写的，你仔细看看

------------------ 原始邮件 ------------------ 发件人: "ccyzz"<notifications@github.com>; 发送时间: 2019年11月21日(星期四) 下午2:31 收件人: "dwanda/dragComponent"<dragComponent@noreply.github.com>; 抄送: "宇达"<huangyuda13@qq.com>; "Comment"<comment@noreply.github.com>; 主题: Re: [dwanda/dragComponent] 如果要实现12 或者 21 以及 n*n 等尺寸的会不会很麻烦？ (#1)

我git clone你的demo也没问题，就是我把cardDragger引入到我自己的项目中时就报错了。slotProps是固定的字段吗，我想可能是我没有定义，所以报错了。我目前用的vue2.0，是需要最新的vue版本才可以吗

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ccyzz]

好的，谢谢！

[ccyzz]

不好意思，再次打扰了。有个问题确实很久都没解决，所以想请教你一下。就是卡片区域的内容部分我用的是组件，但是父组件传值给子组件时总是接收不到是什么原因呢

[dwanda]

...那就证明没传进去啊...估计是你vue的基础部分搞错了...反正有个2.0版本的人跟我商量过好几次他用了没问题的

------------------ 原始邮件 ------------------ 发件人: "ccyzz"<notifications@github.com>; 发送时间: 2019年11月21日(星期四) 下午4:40 收件人: "dwanda/dragComponent"<dragComponent@noreply.github.com>; 抄送: "宇达"<huangyuda13@qq.com>; "Comment"<comment@noreply.github.com>; 主题: Re: [dwanda/dragComponent] 如果要实现12 或者 21 以及 n*n 等尺寸的会不会很麻烦？ (#1)

不好意思，再次打扰了。有个问题确实很久都没解决，所以想请教你一下。就是卡片区域的内容部分我用的是组件，但是父组件传值给子组件时总是接收不到是什么原因呢

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ccyzz]

父与子的通信我没用错，具体原因是因为我在内容区域写的组件example-child 没有生效，所以里面的值传不过去。 `

      <div class="dotBox">
        <div class="circleDot" v-if="componentData.length">
          <example-child 
          :myId="echartsId"
          :seriesData ="pieData"
          v-if="flag == true"></example-child>
        </div>
        <div class="menuTitle" v-else></div>
        <div class="circleDot">123</div>
        <div class="circleDot"></div>
      </div>
    </div>`

生效的部分是写在componentData里的 componentData: ExampleChild ExampleChild就是我定义的内容组件，那请问这个时候父组件应该怎样传值呢

[dwanda]

import exampleChild1 from "./childComponent/exampleChild1" //省略部分代码 cardList: [ { positionNum: 1, name: "演示卡片1", id: "card1", componentData:exampleChild1, //直接设置即可使用 自定义属性：具体的值 } ] //使用componnetData属性传入的组件，可使用Props获取到单个卡片数据 //在子组件中使用props即可获取到上面自定义的属性值 props:{ itemData:{ type:Object } }

你看看这个可以不，直接把属性放在和componentData同级，没记错的话是这样

[ccyzz]

谢谢啦，试了一下，还是不可以。

[dwanda]

....我在仓库加了个example3测试了一下...明明就可以啊...

------------------ 原始邮件 ------------------ 发件人: "ccyzz"<notifications@github.com>; 发送时间: 2019年11月21日(星期四) 晚上6:51 收件人: "dwanda/dragComponent"<dragComponent@noreply.github.com>; 抄送: "宇达"<huangyuda13@qq.com>; "Comment"<comment@noreply.github.com>; 主题: Re: [dwanda/dragComponent] 如果要实现12 或者 21 以及 n*n 等尺寸的会不会很麻烦？ (#1)

谢谢啦，试了一下，还是不可以。

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.