标签: drag-and-drop

是否可以允许用户在移动Safari中拖放项目？iPhone上的谷歌图像做了类似的事情,但我不确定是否真的拖放或其他一些工作.有人有任何见解吗？

我在Canvas上有一个拖放操作,当一个对象被拖入和拖出时,它应该做某事.我的问题是DragEnter/DragLeave事件在鼠标移动对象时继续触发,而不仅仅是在进入/退出时.鼠标移动得越快,事件发生的频率就越高.

Canvas DragOver事件移动了DraggedObject的Canvas.Top/Left,我认为这可能是我的问题,但我不知道如何解决这个问题.

我试图在没有鼠标/用户交互的情况下手动"触发"拖放.

到目前为止,我已经能够设置用于拖放的jQuery UI 演示,但无法使用trigger()方法触发拖放.

任何人都可以帮助设置它吗？

到目前为止我的代码是:

  $(function() {
      $( "#draggable" ).draggable();
      $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
        .addClass( "ui-state-highlight" )
        .find( "p" )
        .html( "Dropped!" );
      }
    });

    $('#draggable').trigger("drop", $('#droppable'));
  });

提前致谢!

使事情变得简单.我想要做的就是从droppable()之外的任何地方调用'drop'方法,但我总是需要能够指定事件和ui对象.

我有一个自定义小部件,实际上是一个图像,我希望能够将它拖动到AbsolutePanel内并每次都得到它的坐标.我想使用GWT 2.4的新DND API,但我很难实现它.有人可以提出我必须采取的基本步骤吗？

我在JScrollPane的Viewport中使用第二个JTable来为主表构建RowHeader.主表上的DragAndDrop已禁用.在rowheader表上启用DnD.

如果用户启动了rowheader上的Drag,我想在主表上扩展绘制的rowheader下划线(图像中的黑线)(如图中的绿线).

有人对我有建议吗？
这是SSCCE:

import java.awt.Component;
import java.awt.EventQueue;
import java.awt.Font;
import java.awt.datatransfer.StringSelection;
import java.awt.datatransfer.Transferable;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;
import javax.swing.DropMode;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import javax.swing.JViewport;
import javax.swing.TransferHandler;
import javax.swing.UIManager;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;
import javax.swing.table.DefaultTableCellRenderer;
import javax.swing.table.JTableHeader;
import javax.swing.table.TableColumn;


public class DNDLinePainterExampleMain extends JFrame {

  public DNDLinePainterExampleMain() {
    JTable mainTable = new JTable(4, 3);
    mainTable.setAutoResizeMode(JTable.AUTO_RESIZE_OFF);

    JTable rowTable = new RowHeaderTable(mainTable);
    rowTable.setAutoscrolls(true);
    rowTable.setDragEnabled(true);
    rowTable.setTransferHandler(new RowHeaderTransferHandler());
    rowTable.setDropMode(DropMode.INSERT_ROWS);

    JScrollPane scrollPane = new JScrollPane(mainTable);
    scrollPane.setRowHeaderView(rowTable);
    scrollPane.setCorner(JScrollPane.UPPER_LEFT_CORNER,
        rowTable.getTableHeader()); …

我有几个可拖动的元素

<div Class="question-item" draggable="true">Box 1: Milk was a bad choice.</div>
<div class="question-item" draggable="true">Box 2: I'm Ron Burgundy?</div>
<div class="question-item" draggable="true">Box 3: You ate the entire wheel of cheese?     </div>
<div class="question-item" draggable="true">Box 4: Scotch scotch scotch</div>

我有以下事件处理程序:

var $questionItems = $('.question-item');

$questionItems
  .on('dragstart', startDrag)
  .on('dragend', removeDropSpaces)
  .on('dragenter', toggleDropStyles)
  .on('dragleave', toggleDropStyles);


function startDrag(e){
  console.log('dragging...');
  addDropSpaces();
  e.stopPropagation();
}

function toggleDropStyles(){
  $(this).toggleClass('drag-over');
  console.log(this);
}


function addDropSpaces(){
  $questionItems.after('<div class="empty-drop-target"></div>');
}

function removeDropSpaces(){
  console.log("dragend");
  $('.empty-drop-target').remove()
}

为什么它只适用于第一个可拖动的.如果我拖动说最后一个draggable - dragend事件立即被触发.(我不想使用jQuery UI btw)

这对我来说毫无意义 - 它看起来像一个bug.

我在OSX上的Chrome …

我有这个代码:

function drop(evt) {
    evt.stopPropagation();
    evt.preventDefault(); 
    var imageUrl = evt.dataTransfer.getData('URL');
    alert(imageUrl);
}

小提琴

如果删除<img>元素,它会提醒图像的URL.到现在为止还挺好.

我的问题是,如果你删除的<a>元素它会提醒的网址href的<a>元素.如果您在上面的示例中下载图像,我想提醒<img>内部元素的url <a>.

那可能吗？

我不介意使用Jquery或任何其他库.我只想把图像的url放在一个<a>元素中.

重点是将图像链接从其他网站拖到我的网站并获取图像的网址.

为了更清楚我想要实现的目标,请尝试在此帖子下拖动我的个人资料图片并将其放入小提琴中.它提醒http://stackoverflow.com/users/3074592/laaposto.我想http://i.stack.imgur.com/juvdV.jpg?s=32&g=1收到提醒.

我希望该解决方案适用于最新版本的Chrome和Firefox.

我一直在研究Android的启动器应用程序,类似于nova启动器.我已经设置了OnItemLongClickListener和OnDragListener.当我长按一个图标时,会显示一个弹出窗口,其中包含"删除","更改图标"等菜单.下图显示了长按时打开弹出窗口的应用程序的进度.

问题是当弹出窗口打开时拖动工作但下降不起作用.一旦弹出窗口打开,我似乎无法记录x,y位置.同样,当执行drop时,logcat中会显示以下消息.

I/ViewRootImpl: Reporting drop result: false

我的代码在OnDragListener中是这样的

public boolean onDrag(View v, DragEvent event) {
int dragEvent = event.getAction();
switch (dragEvent)
    {
        case DragEvent.ACTION_DRAG_LOCATION:
        //Open popup here; note: its opened only once. popup.show();
        //Log.i("Position x : ", Float.toString(event.getX())); log x or y

        /*code to detect x any y change amount and close the popup
          once user drags the icon little further and app knows that
          user is trying to drag instead of opening the popup
          and hence close the popup. …

monitor.getDropResult()返回null(我看它是console.log).它应该返回对象(拖动项)及其位置.为什么它返回null？

我使用DragSource,DropTarget对我的组件进行签名.但它仍然返回null

这是我的整个组件代码:

import React, { PropTypes } from 'react';
import { DragSource } from 'react-dnd';
import { getEmptyImage } from 'react-dnd-html5-backend';

import { StoneConstants, StoneTypes, ItemTypes } from 'constants/AppConstants';
import OkeyStoneBase from 'components/OkeyStoneBase/OkeyStoneBase';

import './_OkeyStone.scss';

function checkForDragAction(props) {

  // TODO receive the action via prop
  if (props.stoneType === StoneTypes.ON_WITHDRAW_MIDDLE) {
    props.onWithdrawMiddle();
  } else if (props.stoneType === StoneTypes.ON_DISCARD_WEST) {
    props.onWithdrawLeft();
  }
}

function applyDropResult(props, result) {

  if (props.stoneType === StoneTypes.ON_WITHDRAW_MIDDLE || props.stoneType === StoneTypes.ON_DISCARD_WEST) {
      if (result === null) …

我正在做简单的配对游戏.游戏有很多问题.我正在使用拖放进行匹配.首先,我将图像元素放到一个容器中,当我选择另一个元素并尝试将其放入同一个容器时,目前它正在覆盖现有元素.我想检查已经有元素的容器.如果没有,则允许掉落,否则防止跌落.

码:

<!DOCTYPE HTML>
<html>
<head>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap -->
    <link href="manage/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom Styles -->
    <link href="css/style.css" rel="stylesheet">
    <script src="manage/js/jquery-2.1.4.min.js"></script>
    <style>
.left, .right {
    float: left;
    width: 100px;
    height: 35px;
    margin: 10px;
    border: 1px solid black;
}
</style>
</head>
<body>
<h2>Matching the following</h2>
<div class = "container-fluid"> 
    <div class="row">
        <div class = "col-md-2">
            Option A
        </div>
        <div class = "col-md-1">
                <div class="left" id="left_1">
                    <img src="manage/images/login.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
                </div>
        </div>
        <div class …