标签: drag-and-drop

我一直在研究一个需要HTML5拖放的项目,而且我遇到的东西可能很容易实现,但我似乎无法找到解决方案.

基本上我有一些可拖动的元素和一些下降区域.由于使用一个工作示例更容易解释,我已经制作了这个简单的JSFIDDLE

现在您可以将任何元素拖动到任何拖放区域或根据需要将它们移出,但我想要实现的是让橙色框放在任何绿色区域中(并忽略蓝色区域......)如果你将它放在那里,它会移回原来的位置)红色的盒子必须放入蓝色的盒子里(忽略绿色的盒子).

任何人都可以帮助我或提示我一个解决这个问题的方法吗？

    function DragOver(ev) {
      ev.preventDefault();
    }

    function Drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }

    function Drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
    }


    var elemens = document.querySelectorAll('.draggable');
    [].forEach.call(elemens, function(elem) {
      elem.addEventListener('dragover', DragOver, false);
      elem.addEventListener('drop', Drop, false);
    });

   #divContenedor {
     width: 950px;
     height: 500px;
   }
   
   #div1,
   #div2,
   #div3 {
     width: 350px;
     height: 70px;
     border: 1px solid #aaaaaa;
     background-color: green;
   }
   
   #div4 {
     width: 350px;
     height: 70px;
     border: 1px solid #aaaaaa;
     background-color: blue;
   }

<p>
  Drag&drop testing</p> …

我项目中剩下的一件事是使两个div同时可拖动和可放置。现在我有了可以拖放的div的工作代码，但是例如，我可以将div从目标区域拖放到用户区域，但是我似乎无法找到一种方法将这些div从用户拖放并分配给其他用户用户。

$(document).ready(function(){
    $(".dragable").draggable({
        cancel: "a.ui-icon",
        revert: true,
        helper: "clone",
        cursor: "move",
        revertDuration: 0
    });

    $('.droppable').droppable({
        accept: ".dragable",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
            // clone item to retain in original "list"
            var $item = ui.draggable.clone();
            $(this).addClass('has-drop').append($item);
        }
    });
});

http://jsfiddle.net/coder880/TpbZk/31/

我必须将应用程序li​​stView拖放到代码生成的网格中.所以我做了一个测试程序,这是有效的

这是xaml

<Grid Margin="0,0,-61.6,0.4">
<ListView x:Name="lwOne"  PreviewMouseLeftButtonDown="ListBox_PreviewMouseLeftButtonDown"  Background="Bisque" Margin="16,65,340.2,22">
  <ListView.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel Orientation="Horizontal" Width="250" VerticalAlignment="Top"></WrapPanel>
    </ItemsPanelTemplate>
  </ListView.ItemsPanel>

</ListView>

<Grid Name="grdMain" Drop="Grid_Drop" Background="AliceBlue" AllowDrop="True" Margin="380,65,81.2,62"/>

现在我必须将所有这些迁移到我看起来像这样的真实应用程序

因此,从光标的外观来看,我可以看到网格上不允许拖放,但它位于每个单元格的微小边框上.所以问题不是做d&d而是允许它

这是xaml.源listView是lvAllowedPPtab2,目标网格是grdPalletTab2

<TabItem Name="tabItem2" HorizontalAlignment="Center" Height="80" MouseLeftButtonUp="TabItem_MouseLeftButtonUp"  FontSize="{StaticResource TOOLTIP_FONTSIZE}" IsSelected="false" >
    <TabItem.Header>
      <StackPanel>
        <TextBlock Text="&#xF0F7;" FontSize="{StaticResource TAB_FONTSIZE}"/>
        <TextBlock Name="tbTab2" Visibility="Hidden" FontSize="{StaticResource BUTTON_FONTSIZE}" />
      </StackPanel>
    </TabItem.Header>
    <TabItem.Background>
      <ImageBrush/>
    </TabItem.Background>
    <Grid >
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
      </Grid.ColumnDefinitions>
      <Border x:Name="Border1Tab2" BorderBrush="Gainsboro" BorderThickness="5" Width="200" Margin="10,10,10,10" >
        <StackPanel Margin="-1.8,-0.8,2.2,1.4">
          <ListBox x:Name="lbxPalletsTab2" Background="{x:Null}" BorderBrush="{x:Null}" Height="600" SelectionChanged="ListBox_SelectionChanged" Margin="12,10.2,8.4,10.4" /> …

好像mailchimp有两种类型的模板：经典模板和“拖放”模板。

经典模板（它们称为“主题”）具有使用mc：attrubutes定义的内容区域。其中一些可以重复，但不能四处移动。

“拖放”模板具有“容器”区域，这些区域接受菜单中的内容块，该菜单仅在模板为“拖放”类型时出现。

似乎无法编码和导入“拖放”模板。我尝试将其中的一个导出为HTML，但收到警告，提示重新导入模板将消除其拖放功能。

我是否理解仅可以使用mailchimp模板标记进行编码和导入“经典”模板是正确的，还是我遗漏了一些东西？

注意:

1. 我已尝试在与Dyanmic Droppable Div相关的stackoverflow中提出的其他问题, 我无法这样做.

2. 第一次我不能删除文本框添加新的动态Div.

步:

1. 首先使用拖放DIV控件创建新的div.
2. 然后点击'Add New Div'右上角.这将在面板中创建新的div.
3. 我第一次无法在新创建的DIV中删除文本框.
4. textbox在面板中删除后,我可以在新创建的DIV上删除文本框.

我想要

1. 首次尝试时在新创建的DIV上删除文本框.

这是我的DEMO代码

在很多网站上,您都有一个拖放界面来更改列表中元素的顺序.我正在寻找类似Shiny的东西.我希望用户能够拖放列表的元素以通过更改顺序来更改优先级.

现在我有一个滥用的解决方案selectizeInput().这有效,但当选择列表变大时,它很快变得很麻烦.

举例说明:

library(shiny)

shinyApp(
  ui = shinyUI({
    fluidPage(
      title = "Example for ordering objects",
      sidebarLayout(
        sidebarPanel(uiOutput("selection"),
                     actionButton('update',"Update")),
        mainPanel(
          helpText('The order of elements'),
          tableOutput('theorder')
        )
      )
    )
  }),
  server = function(input, output, session) {
    values <- reactiveValues(x = c('Item1','Item2','Item3'))

    output$selection <- renderUI({
      selectizeInput('neworder',
                     'Select new order',
                     choices = values$x,
                     multiple = TRUE)
    })

    output$theorder <- renderTable(
      values$x
    )

    observeEvent(input$update,{
      id <- values$x %in% input$neworder
      values$x <- c(input$neworder, values$x[!id])
    })
  }
)

缺点:要更改列表末尾的顺序,用户必须以正确的顺序选择整个列表.一个错误,他必须重新开始.

愿望清单:一个闪亮的小部件(可能来自另一个包),最好是拖放,这可以使这种动作更方便.

对于我的项目,我正在使用Drag&Drop库DropzoneJS.它工作得很好,但我希望有一个特定的功能(据我所见)不支持'开箱即用'.

在我的Dropzone配置中,我已经指定了acceptedFiles:

acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf"

当我使用浏览按钮时,它会自动检查文件是否受支持.但是当我拖放文件时,检查是在上传完成后完成的,并显示带有错误消息的文件.

我想要实现的是拖放操作首先检查文件是否受支持,并自动丢弃不支持的文件.我仍然想显示一条错误消息,指出某些文件不受支持.

作为参考,这是我完整的Dropzone配置:

import Dropzone from 'dropzone';

export default class UI_DropZone {
  constructor() {
    if (document.querySelector('#dropZone')) {
      let previewNode = document.querySelector("#template");
      previewNode.id = "";
      let previewTemplate = previewNode.parentNode.innerHTML;
      previewNode.parentNode.removeChild(previewNode);

      return new Dropzone("#dropZone", {
        url: "/dist/files",
        thumbnailWidth: 300,
        thumbnailHeight: 300,
        parallelUploads: 20,
        maxFilesize: 10,
        acceptedFiles: ".png,.jpg,.jpeg,.gif,.pdf",
        previewTemplate: previewTemplate,
        previewsContainer: '#previews',
        clickable: '.fileinput-button',
        autoProcessQueue: false
      });
    }
  }
}

我正在使用swift 4和Xcode 9,我遇到了拖放实现的问题.我有一个自定义的'目的地'视图滴,并在swift 3我打电话

register(forDraggedTypes: Array(NSURLPboardType))

接受包含这些类型的拖动.我如何在swift 4中做这样的事情？现在我有了这段代码

registerForDraggedTypes([.pdf])

当我在视图中删除pdf时,没有一个NSDraggingDestination方法调用.(我的自定义视图位于顶部)

2017年制作拖放构建器的最佳方法是什么？是的,之前已经问过这个问题,但那是5年前,我认为事情已经改变了？HTML5,jQuery UI还是现在还有其他选择吗？

一个更新的问题表单生成器从头开始 - HTML 5拖放,或JQuery UI可拖动,或什么？也没有得到答复.

任何帮助都会很棒!我已经开始兼顾两者了(我从来没有使用过HTML5或jQuery UI的Drag and Drop,所以我很难做出决定.)jQuery UI似乎更容易使用和理解,但也似乎非常错,很好至少在codepen中.

iOS 11.x Swift 4

尝试使用新的drop and drag协议实现自定义类,并需要一些超级编码器帮助.我创建了这个类.

import UIKit
import MobileCoreServices

class CustomClass: NSObject, NSItemProviderWriting, NSItemProviderReading {

var image2D:Data?

static var readableTypeIdentifiersForItemProvider = [kUTTypeData as String]

static func object(withItemProviderData data: Data, typeIdentifier: String) throws -> Self {
    return try self.init(itemProviderData: data, typeidentifier: kUTTypeData as String)
}

required init(itemProviderData data: Data, typeidentifier: String) throws {
    super.init() 
    image2D = data
}

static var writableTypeIdentifiersForItemProvider = [kUTTypeData as String]

func loadData(withTypeIdentifier typeIdentifier: String, forItemProviderCompletionHandler completionHandler: @escaping (Data?, Error?) -> Void) -> Progress? { …