1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <template>
- <draggable
- :style="{
- left:signalBorder[0].Left*Scale+'px',
- top:signalBorder[0].Top*Scale+'px',
- width:signalBorder[0].Width*Scale + 'px',
- height:signalBorder[0].Height*Scale + 'px',
- zIndex:signalBorder[0].ZIndex,
- display:signalBorder[0].IsVisibility ? 'block' : 'none',
- fontSize:signalBorder[0].FontSize*Scale + 'px',
- color:`#${signalBorder[0].ForegroundStr.slice(3)}`,
- position:'absolute',
- overflow:'auto',
- }"
- class="signal_body"
- element="div"
- v-model="signalListJson"
- :options="dragOptions1"
- :move="onMove"
- @start="isDragging=true"
- @end="isDragging=false"
- >
- <!--列表项-->
- <div class="signal_item" v-for="item in signalListJson" :key="item.ID">
- <div class="signal_item_bg">
- <div class="signal_item_bg_body">
- <div class="signal_item_bg_body_space"></div>
- <div class="signal_item_bg_body_font">{{item.showName}}</div>
- </div>
- </div>
- </div>
- </draggable>
- </template>
- <script>
- import {mapState} from 'vuex'
- import draggable from 'vuedraggable'
- export default {
- components: {
- draggable
- },
- methods: {
- // 移动信号源
- onMove({relatedContext, draggedContext}) {
- const relatedElement = relatedContext.element
- const draggedElement = draggedContext.element
- return (
- (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
- )
- },
- },
- computed: {
- ...mapState(['signalListJson','signalBorder','Scale']),
- dragOptions1() {
- return {
- animation: 0,
- group: {
- name: "description",
- pull: 'clone',
- put: false
- },
- ghostClass: "ghost",
- }
- },
- dragOptions2() {
- return {
- animation: 0,
- group: "description",
- }
- },
- }
- }
- </script>
- <style scoped>
- </style>
|