export default {
render(createElement) {
return createElement(
'div',
{
style: {
position: 'absolute',
left: `${this.x}px`,
top: `${this.y}px`,
width: `${this.w}px`,
height: `${this.h}px`,
},
on: {
mousedown: this.onMouseDown,
},
},
this.$slots.default
)
},
methods: {
onMouseDown(e) {
// set start cords
addEvent(document.documentElement, 'mousemove', this.onMouseMove)
},
onMouseMove(e) {
const x = //
const y = //
this.$emit('drag', x, y)
}
}
}
function debounce(callback, ms = 500) {
let timer = null;
return function (...args) {
const onComplete = () => {
callback.apply(this, args)
timer = null
}
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(onComplete, ms)
}
}
const actions = {
dragElement({commit, state}, {element, x, y}) {
debounce(() => { commit('moveElement', {element, x, y}) })
}<template>
<element v-for="element in elements" :element="element" :key="element.id" />
</template>
<script>
export default {
computed: {
elements() {
return this.$store.state.project[this.$store.state.projectId].elements
}
}
}
</script><template>
<drag @drag="onDrag" :x="element.x" :y="element.y"><div>{{ element.id }} </div></drag>
</template>$category->options()->attach($optionId, ['value' => $value]);
или
App\Category::find(1)->options()->save($option, ['value' => $value]);->updateExistingPivot($optionId, $attributes);