标签: drag-and-drop

我在页面上有可用jQuery拖动的元素.这些元素是否具有导航到另一页面的点击事件(例如普通链接).

什么是防止点击触发放弃这样的元素同时允许点击它的最佳方法是不是拖放状态？

我有可排序元素的这个问题,但认为有一个普通拖放的解决方案是好的.

我已经为自己解决了这个问题.在那之后我发现Scriptaculous存在相同的解决方案,但也许有人有更好的方法来实现它.

看来drop事件并没有在我预料到的时候触发.

我假设当被拖动的元素在目标元素上方释放时会触发drop事件,但这似乎不是这种情况.

我有什么误会？

http://jsfiddle.net/LntTL/

$('.drop').on('drop dragdrop',function(){
    alert('dropped');
});
$('.drop').on('dragenter',function(){
    $(this).html('drop now').css('background','blue');
})
$('.drop').on('dragleave',function(){
    $(this).html('drop here').css('background','red');
})

当我从设置为溢出的容器div中拖动div时,我有一个不受欢迎的效果:滚动.

我找到了其他人遇到问题的例子,但我一直无法找到解决方案

粘贴仓的示例

会发生什么是滚动只是增加,我可以看到为什么这将是所需的行为,如果你想拖动到可滚动div内的目的地,但我希望能够把它带到滚动抓取之外.

我没有看到任何这样做的例子.这是API规范中不允许的吗？

我正在寻找一个简单的拖放解决方案,用于上传整个文件夹树的照片.

我正在尝试获得类似于此站点上的jQuery组件.

基本上,有一个包含可用元素的列表,您可以将其拖放到多个块中.

我有很多JavaScript开发经验,但我对jQuery很新,我希望将其编写为脚本.

你能否请我引导一些类似上面所示的例子,或者给我一些关于什么是开始寻找这样的好地方的提示？

是否可以使用jQuery的drop事件从桌面拖动文件？

如果是这样,我如何获取删除的文件数据？

安装程序

所以,我有一个令人满意的div - 我正在制作一个WYSIWYG编辑器:粗体,斜体,格式化,无论如何,最近:插入花哨的图像(在一个花哨的盒子里,带有标题).

<a class="fancy" href="i.jpg" target="_blank">
    <img alt="" src="i.jpg" />
    Optional Caption goes Here!
</a>

用户使用我给他们提供的对话框添加这些奇特的图像:他们填写详细信息,上传图像,然后很像其他编辑器功能,我用document.execCommand('insertHTML',false,fancy_image_html);它来根据用户的选择进行填充.

期望的功能

所以,现在我的用户可以拍摄一个奇特的图像 - 他们需要能够移动它.用户需要能够单击并拖动图像(花式框和所有图像),以便将其放置在满足其中的任何位置.他们需要能够在段落之间移动,甚至在段落之间 - 如果他们想要的话,在两个单词之间移动它.

什么给了我希望

请记住 - 在一个可信的,简单的旧<img>标签已经被用户代理祝福,具有这种可爱的拖放功能.默认情况下,您可以将<img>标签拖放到任何地方; 默认的拖放操作就像人们梦寐以求的那样.

所以,考虑一下这种默认行为如何对我们的<img>伙伴们如此有用- 我只想稍微扩展这种行为以包含更多的HTML - 这似乎应该是容易实现的.

我的努力到目前为止

首先,我<a>使用draggable属性设置我的花哨标签,并禁用contenteditable(不确定是否有必要,但似乎它可能也是关闭):

<a class="fancy" [...] draggable="true" contenteditable="false">

然后,因为用户仍然可以将图像拖出花哨的<a>盒子,我不得不做一些CSS.我在Chrome上工作,所以我只向你展示-webkit-前缀,尽管我也使用了其他的.

.fancy {
    -webkit-user-select:none;
    -webkit-user-drag:element; }
    .fancy>img {
        -webkit-user-drag:none; }

现在,用户可以拖动整个花哨的盒子,并且稍微部分褪色的点击拖动表示图像反映了这一点 - 我可以看到我现在正在拿起整个盒子:)

我已经尝试了几种不同CSS属性的组合,上面的组合似乎对我有意义,并且似乎效果最好.

我希望只有这个CSS就足以让浏览器使用整个元素作为可拖动的项目,自动向用户授予我一直梦寐以求的功能...... 然而,它似乎比这更复杂.

HTML5的JavaScript拖放API

这种拖放似乎比它需要的更复杂.

所以,我开始深入研究DnD api文档,现在我被卡住了.所以,这就是我所操作的(是的,jQuery):

$('.fancy')
    .bind('dragstart',function(event){
        //console.log('dragstart');
        var dt=event.originalEvent.dataTransfer;
        dt.effectAllowed …

我试图检测是否在dragover或dragenter事件中拖动文件夹或文件.

例如:

在这种情况ondrop下,有一个名为的参数MouseEvent,它有一个名为的字段dataTransfer,其中列出了文件(.files)或项目(.items),具体取决于浏览器,我可以在Chrome和Firefox中阅读.但是,对于dragover和dragenter事件,这些字段(.files和.items)是空的.问题是我在拖动时需要这些信息,而不是丢弃.

注意:对于文件和文件夹event.dataTransfer.types[i] === "Files"都是true.

背景研究

我发现以下答案部分适合我的问题:

WebKit,以及Chrome,对你什么时候打电话有很大的限制getData.你不允许在里面dragstart或者里面做dragover.我认为这是规范的错误.

但答案是从2012年开始,我无法找到有关该主题的实际更新信息,因此我正在寻找有关此问题的最新信息.

我目前正在尝试使用UICollectionView实现UITableView重新排序行为.

让我们调用一个UItableView电视和一个UICollectionView CV(以澄清以下解释)

我基本上试图重现电视的拖放,但我没有使用编辑模式,一旦触发长按手势,单元就可以移动了.它完美地工作,我使用CV的移动方法,一切都很好.

我更新CV的contentOffset属性以在用户拖动单元格时处理滚动.当用户转到顶部和底部的特定矩形时,我更新了contentOffset和CV滚动.问题是当用户停止移动手指时,手势不会发送任何更新,这会使滚动停止并在用户移动手指后立即重新开始.

这种行为绝对不自然,我宁愿继续滚动,直到用户发布CV,就像电视中的情况一样.电视拖放体验很棒,我真的想重现同样的感觉.有没有人知道他们在重新排序时如何管理电视中的滚动？

• 我尝试使用计时器重复触发滚动动作,只要手势位置在正确的位置,滚动很糟糕且效率不高(非常慢和跳跃).
• 我也尝试使用GCD在另一个线程中监听手势位置,但结果甚至更糟.

我对此没有任何想法,所以如果有人有答案,我会嫁给他!

以下是longPress方法的实现:

- (void)handleLongPress:(UILongPressGestureRecognizer *)sender
{
    ReorganizableCVCLayout *layout = (ReorganizableCVCLayout *)self.collectionView.collectionViewLayout;
    CGPoint gesturePosition = [sender locationInView:self.collectionView];
    NSIndexPath *selectedIndexPath = [self.collectionView indexPathForItemAtPoint:gesturePosition];

    if (sender.state == UIGestureRecognizerStateBegan)
    {
        layout.selectedItem = selectedIndexPath;
        layout.gesturePoint = gesturePosition; // Setting gesturePoint invalidate layout
    }
    else if (sender.state == UIGestureRecognizerStateChanged)
    {
        layout.gesturePoint = gesturePosition; // Setting gesturePoint invalidate layout
        [self swapCellAtPoint:gesturePosition];
        [self manageScrollWithReferencePoint:gesturePosition];
    }
    else
    {
        [self.collectionView performBatchUpdates:^
        {
            layout.selectedItem = nil;
            layout.gesturePoint = CGPointZero; …

我正在使用这种方法http://jqueryui.com/demos/sortable/#connect-lists连接我拥有的两个列表.我希望能够从列表A拖动到列表B,但是当项目被删除时,我需要将原始列表保留在列表A中.我检查了选项和事件,但我相信没有类似的东西.任何方法？