标签: drag-and-drop

有没有人知道Trello如何做那些漂亮的拖放效果,所选择的卡片与文本可见的角度略有不同？

我喜欢认为我会查看网络上的任何网站并大致了解所有内容是如何完成的,但我从未见过像这样的效果无缝完成.它是一个预渲染的图像,它在服务器上动态设置并在拖动开始时加载？

我知道的完全无聊的问题!

我在网页上有一个dropzone.js实例,其中包含以下选项:

autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20

它以编程方式实例化,因为它是更大形式的一部分.在提交表单时,我已经完成了处理队列的操作.

我的目标是让我的用户能够使用dropzone管理项目的图像,所以我希望他们能够通过拖放dropzone.js图像预览来重新排序图像.有没有办法做到这一点？我已经尝试过使用jquery-ui的可排序但它似乎与dropzone.js不太搭配.

我很难创建一个JTree,它允许通过在JTree中拖放节点来重组节点.这似乎应该相对简单.我在线查看了一些示例,但我似乎无法在自己的代码中实现它.

例如,sun提供的这允许在不同组件之间拖动到树中,而不是从树本身内拖动.

我还发现这可以让你将文本拖到JTree中,但不能在树中拖动.

import java.awt.*;
import java.awt.datatransfer.*;
import java.awt.event.*;
import java.io.*;
import javax.swing.*;
import javax.swing.tree.*;

public class DndTree {

    public static void main(String args[]) {
        Runnable runner = new Runnable()  {

            public void run() {
                JFrame f = new JFrame("D-n-D JTree");
                f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

                JPanel top = new JPanel(new BorderLayout());
                JLabel dragLabel = new JLabel("Drag me:");
                JTextField text = new JTextField();
                text.setDragEnabled(true);
                top.add(dragLabel, BorderLayout.WEST);
                top.add(text, BorderLayout.CENTER);
                f.add(top, BorderLayout.NORTH);

                final JTree tree = new JTree();
                final DefaultTreeModel model = (DefaultTreeModel) tree.getModel(); …

我正在广泛使用HTML5本机拖放,它几乎完全表现自己,只有一个小例外.

当任何东西被拖到页面上时,我正在尝试突出显示我的下拉区域.我最初试图通过在文档体上放置jQuery侦听器来实现这一点,如下所示:

$("body").live('dragover',function(event){lightdz(event)});
$("body").live('dragexit dragleave drop',function(event){dimdz(event)});

使用lightdz()和dimdz()更改页面上所有dropzones的背景颜色样式属性,使它们脱颖而出.这没用.每当拖动的对象进入页面上的子元素(如div容器)时,侦听器就会将其标记为dragleave事件并使dropzones变暗.

我通过将侦听器应用于页面上的所有可见元素而不仅仅是正文来解决这个问题.当它跨越一个元素和另一个元素之间的边界时,它们偶尔会出现轻微的可见闪烁,但它看起来很好.

无论如何,现在我已经改变了lightdz()和dimdz(),以便他们将快速的jQuery fadeTo()动画应用到所有非dropzones.这在它工作时看起来很棒,并且使用户非常清楚他们可以做什么,也不能放弃.麻烦的是当它在元素边界之间传递时,它应用淡入淡出动画.这是一个很多比的背景颜色偶尔闪烁更加明显,尤其是如果对象拖到多个边界的速度非常快,它会排队的动画和在页面淡入和淡出反复.

即使我不与fadeTo()动画打扰,只是更改不透明度,这是一个很大比背景色闪烁更加明显,因为整个页面的变化,而不只是悬浮窗元素.

有没有办法将整个页面作为单一元素引用以用于dragover和dragleave事件？如果失败了,有没有办法检测在浏览器窗口之外发生的丢弃？如果我跳过dragleave事件,它看起来很好,但如果任何对象被拖过浏览器窗口然后掉到它外面,整个页面都会褪色.

在ui draggables(http://jqueryui.com/demos/droppable/#revert)上可以恢复一个div,如果它在一个div内,如果不在另一个div内？比如这样

$( "#draggable" ).draggable({ revert: "valid", revert:"invalid" });

但由于显而易见的原因,这不会起作用..我可以这样做吗？...当它在这个可放置的内部而不是在那个可放置的内部时？

我希望我的WPF应用程序成为放置目标,我希望能够从任何网页拖动图像.

当从网页拖动图像时,显然它是"DragImageBits"格式,可以反序列化以键入ShDragImage.(请参阅问题的底部,了解我如何定义它)

如何将其转换为WPF图像？

这是我目前的尝试.(如果有人知道做出绝望的正确方法,我全都耳朵)

   private void UserControl_Drop(object sender, System.Windows.DragEventArgs e)
    {

            string[] formats = data.GetFormats();

            // DragImageBits
            if (formats.Contains("DragImageBits"))
            {
            MemoryStream imageStream = data.GetData("DragImageBits") as MemoryStream;

            // Now I'm deserializing this, the only way I know how
            imageStream.Seek(0, SeekOrigin.Begin);
            BinaryReader br = new BinaryReader(imageStream);

            ShDragImage shDragImage;
            shDragImage.sizeDragImage.cx = br.ReadInt32();
            shDragImage.sizeDragImage.cy = br.ReadInt32();
            shDragImage.ptOffset.x = br.ReadInt32();
            shDragImage.ptOffset.y = br.ReadInt32();
            shDragImage.hbmpDragImage = new IntPtr(br.ReadInt32());
            shDragImage.crColorKey = br.ReadInt32();


            var systemDrawingBitmap = System.Drawing.Bitmap.FromHbitmap(shDragImage.hbmpDragImage);

在这一点上,我得到一个类型的例外,System.Runtime.InteropServices.ExternalException消息就是这样Generic GDI+ error.

有谁知道我应该做什么？

我们将Excel文件中的数据导入Java Web应用程序.

用户希望将Outlook(2003和2007)中作为电子邮件附件传入的Excel文件拖放到Web应用程序和浏览器(Chrome)中.

Outlook不允许将Excel文件附件放入浏览器窗口.启用此功能最简单的方法是什么？

function move(e,obj,but){
    if(typeof(obj) === 'string'){
        obj = document.getElementById(obj) ;
    }

    if(typeof(but) === 'string'){
        but = document.getElementById(but) ;
    }

    //elementCoord(but) ;//get the current coords of the button &
    elementCoord(obj) ;//the container

    e = e || window.event ;
    var mouseX = e.clientX ;
    var mouseY = e.clientY ;

    //alert('mouseX='+mouseX+', but.XCoord '+but.XCoord) ;
    var diffX = Math.abs(obj.XCoord - mouseX) ;
    var diffY = Math.abs(obj.YCoord - mouseY) ;

    but.addEventListener("dragend",function(evt){
        evt = evt || window.event ;
        mouseX = evt.clientX ;
        mouseY = evt.clientY ;
        obj.style.left …

我已经看了很多脚本,用于通过拖放式AJAX将图像上传到服务器.我找到的脚本不是jQuery,非常大,并没有完全按照我的意愿行事.

将来它应该使用jQuery,AJAX和PHP上传图像.

我的问题

在许多示例中,我查看了e.dataTransfer.files的工作.在我的情况下,它没有.我需要以某种方式绑定它吗？

我想尽可能多地使用jQuery.

的jsfiddle

尽情玩耍......

http://jsfiddle.net/AMjEz/

码

<html>
    <head>
        <style type="text/css">
            #dropzone {
                border: 2px dashed #ccc;
                width: 300px;
                height: 200px;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#dropzone').on({
                    dragenter: function(e) {
                        $(this).css('background-color', 'lightBlue');
                    },
                    dragleave: function(e) {
                        $(this).css('background-color', 'white');
                    },
                    drop: function(e) {
                        e.stopPropagation();
                        e.preventDefault();
                        console.log(e.dataTransfer.files);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="dropzone">
            Drop files here
        </div>
    </body>
</html>

有没有办法动态创建拖放区？我在使用ngFor和cdkDropList时遇到了一些麻烦.

这是我的第一个列表和可拖动元素:

       <div class="subj-container" 
        cdkDropListOrientation="horizontal" 
        cdkDropList 
        #subjectList="cdkDropList"
        [cdkDropListData]="subjects"  
        [cdkDropListConnectedTo]="[lessonList]" 
        (cdkDropListDropped)="drop($event)"
        >
            <div class="subject" *ngFor="let subject of subjects" cdkDrag>
                {{subject.name}}
            </div>
        </div>

这是我的第二个清单:

          <div class="conta" cdkDropList
                #lessonList="cdkDropList"
                [cdkDropListData]="appointment.lessons"
                [cdkDropListConnectedTo]="[subjectList]"
                (cdkDropListDropped)="drop($event)">
                    <div class="sub" cdkDrag *ngFor="let lesson of appointment.lessons">
                        {{lesson.name}}
                </div>
           </div>

现在,带有'conta'类的div在*ngFor中.

我想,我的问题是我的第二个清单.如果我将一个元素从第二个列表拖到列表一,它可以正常工作,但如果我尝试将元素从列表一拖到第二个列表中的任何列表实例,它就无法识别该元素是否被拖动.在这里演示:

我在这里做错了吗？打字稿部分工作正常.

谢谢