标签: sortablejs

有没有办法检测是否有东西被拖到元素上？或者触发悬停事件？找到了一些关于通过 onMove 向拖动的元素添加类的内容，但它似乎对我不起作用。

我编写了一个在整个应用程序中共享的组件，在某些地方我需要拖动/排序，而有些地方不希望它在那里。我将 a 传递prop给我的组件调用disableDraggable并基于它应该禁用，不幸的是它没有做任何事情，我如何禁用可拖动？我应该注意到我尝试了 options 对象语法和 simple :disable，这是相关代码：

 <draggable v-model="copyOfQuestions" @end="$emit('updateQuestionsOrder', copyOfQuestions)" :options="{disable : disableDraggable}">  
// or :disable="disableDraggable"
      <v-card flat class="list_outer_block" v-for="q in questions" :key="q.question_id">
        <v-card-text class="pa-0">

          <v-layout justify-start align-center>
            <v-flex initial-xs px-2 py-3 class="handle minwdth-0" :title="$t('general.drag_for_reorder')">
              <v-icon class="text--secondary  text--lighten-3">$vuetify.icons.drag_indicator</v-icon>
            </v-flex>
    ....
        props: ['questions', 'disableDraggable'],

如何禁用可拖动功能？

我应该注意到vue-draggable（我正在使用的）据说与SortableJs

我用一个闪亮的应用程序shinydashboard中，我动态创建包menuSubItem在SsidebarMenu的dashboardSidebar。子项的创建由 actionButton 触发。我可以menuSubItem在服务器端创建s 就好了，但我还想使用sortable包和sortable_js函数使它们可排序。不过，我似乎无法弄清楚在哪里放置sortable_js函数才能使其真正起作用。

这是我的 MRE：

library(shiny)
library(shinydashboard)
library(sortable)

# Define UI for shinydashboard
ui <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(
      sidebarMenu(
        menuItem("tab_one", tabName = "test_body"),
        menuItemOutput("test"),
        id = "sidebar"
      )
    ),
    dashboardBody(
      tabItem("test_body",
              actionButton("click_me", "Click Me"))
    )
  )


# Define server logic to dynamically create menuSubItems
server <- function(input, output) {

  observeEvent(input$click_me, {
    tabs_list <-
      lapply(1:5, function(x) {
        menuSubItem(text = paste("tab", x))
      })

    output$test <- …

最近我发现SortableJS / Vue.Draggable库（https://github.com/SortableJS/Vue.Draggable）有一个新选项，可以启用多拖动以从数组中选择多个元素并将它们移动到一起（https://github.com/SortableJS/Vue.Draggable/pull/744）。

我看过它完美运行的示例，例如：

• https://jsfiddle.net/zr042g3j/3/
• https://codepen.io/Flip535/pen/jOOKBZj
• https://github.com/SortableJS/Vue.Draggable/pull/744

但是当我尝试在我的项目中使用它时，我只能找到使它工作的方法。

以下是我的项目的详细信息：

• 视图：2.6.10
• Vuedraggable : 2.23.2

在我的 vue 组件中，我以这种方式导入了 vuedraggable：

import draggable from 'vuedraggable'

我已经应用了这种方式（为了这篇文章的目的，代码已经减少了）：

<template>
  <v-flex class="pa-3">
    <div class="instructions-wrapper py-4">
      <v-avatar size="40" color="#4C2159" class="white--text"><b>4</b></v-avatar>
      <div class="px-2">
        <h2>Revisa y asigna</h2>
        <p>Revisa la optimización del sistema y asigna o personaliza una ruta</p>
      </div>
    </div>

    <template v-for="(vehicle, key) in sortedRoutes.routes">
      <v-card class="my-4" :key="vehicle.stops.location_id">
        <v-toolbar color="primary" dark>
          <v-toolbar-title>{{ Object.keys(sortedRoutes.routes).find(key => sortedRoutes.routes[key] === vehicle) }}</v-toolbar-title>
        </v-toolbar>

        <draggable
          :key="vehicle.stops.location_id"
          :list="vehicle.stops"
          :id="key" …

我已经在这里提交了一个问题，但只是想检查一下您是否可以在这里更快地解决这个问题。

尝试排除某个项目的可拖动性是可行的，但无法排除其可排序性——问题是其他元素可以放置在其后面。

SortableJS 文档似乎没有排除。

以下是使用 jQuery UI 的预期行为：

//jQuery UI
$("#demo .sortable").sortable({
    items: "li:not(.exclude)",
    cancel: "li.exclude"
});
$("#demo .sortable").disableSelection();

$('.add-new').click(function(){
    $(this).prev().clone().insertBefore(this);
});

h1{ font-size: 1em; margin:1em}
.sortable { list-style-type: none; margin: 0; padding: 0; width: 260px; overflow:auto; }
.sortable li { background:lightgray; text-align:center; float:left; width:50px; height:50px; margin:0.2em; padding: 0.2em; cursor:move; }
.sortable li.add-new{cursor:default; color:#959595; opacity:0.8; background: white; outline:2px dotted gray}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<h1>jQuery UI</h1>
<div id="demo">
    <ul class="sortable">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
        <li class="ui-state-default"><span …

我尝试获取可以使用SortableJS 排序的嵌套列表的顺序。我的清单是这样的：

<div id="nestedDemo" class="list-group col nested-sortable">
    <div class="list-group-item" data-id="1">Titel 1</div>
    <div class="list-group-item" data-id="2">Titel 2</div>
    <div class="list-group-item" data-id="3">Titel3
        <div class="list-group nested-sortable">
            <div class="list-group-item" data-id="4">Titel 4</div>
            <div class="list-group-item" data-id="5">Titel 5</div>
            <div class="list-group-item" data-id="6">Titel 6</div>
        </div>
    </div>
    <div class="list-group-item" data-id="7">Titel 7</div>
    <div class="list-group-item" data-id="8">Titel 8</div>
    <div class="list-group-item" data-id="9">Titel 9</div>
    <div class="list-group-item" data-id="10">Titel10
        <div class="list-group nested-sortable">
            <div class="list-group-item" data-id="11">Titel 11</div>
            <div class="list-group-item" data-id="12">Titel 12</div>
        </div>
    </div>
</div>

和我的 javascript 代码：

<script>
    $(document).ready(function() {
        var nestedSortables = $(".nested-sortable");

        // Loop through each …

我目前正在制作一个网站构建器，用户可以在其中拖放来添加元素。

拖放效果很好，但我想要的是，如何禁用/隐藏目标容器中的放置占位符？

如图所示，每当我将鼠标悬停在容器上时，它都会默认显示我的拖动元素的副本，这是我不想要的。

这是我的代码：

<template>
<div style="display : flex;">
    <div id="dragArea">
        <draggable
            class="dragArea list-group"
            :list="list1"
            :group="{ name: 'item', pull: 'clone', put: false }"
            :clone="cloneItem"
            @change="log"
        >
            <div class="list-group-item" v-for="element in list1" :key="element.id">{{ element.name }}</div>
        </draggable>
    </div>

    <div id="dropArea">
        <draggable class="dragArea list-group" :list="list2" group="item" @change="log">
            <div class="list-group-item" v-for="element in list2" :key="element.id">{{ element.name }}</div>
        </draggable>
    </div>
</div>
</template>

脚本 ：

<script>
import draggable from "vuedraggable";
let idGlobal = 8;

export default {
    name: "custom-clone",
    display: "Custom Clone",
    order: 3,
    components: {
        draggable, …