标签: drag-and-drop

所以我想用 Angular 制作我的战舰游戏版本，为此我需要一个 10x10 矩阵，我可以在其中拖放船只（如果你玩过游戏，你知道我在说什么）并且我正在使用Angular Cdk，但我根本无法让它工作。

到目前为止我所尝试的是用 div 制作一个表格，将元素放在一边并将它们拖放到板上，但我无法连接两个数组，因为船只数组不是嵌套的，而板是嵌套的。

编辑：这是 stackblitz 示例的链接：https ://stackblitz.com/edit/angular-pp24ad

值得注意的是，矩阵中充满了 IBox，这将有助于稍后的游戏实现。我不确定是否必须更改船舶的数据结构。例如，作为另一个矩阵，我从中获取船只并转移到棋盘上，但我仍然无法弄清楚拖动。我仍然不确定这是解决这个问题的最好方法，所以我愿意改变解决问题的方法。

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

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

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

这是我的代码：

<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, …

当我使用 flutter 创建ReordableListView时，默认会出现一些图标（在右侧）：

我想删除它们，因为我想在这个地方放置其他图标，当我这样做时，它会呈现这个（这显然不是我想要的）：

感谢您的帮助！

我在这里寻找像minus.com这样的JavaScript拖放文件上传库

拖放操作应立即触发上传。

我知道这里有一个不错的jQuery库http://blueimp.github.io/jQuery-File-Upload/，但我想立即触发一个上传

我有7个不同的div(从#rang1到#rang7),我可以在它们上放下图像.
具有类.DraggedItem的图像来自数据库,并且它们
都具有不同的ID.我通过普通的fetch_assoc显示这些图像.如果你有必要
看到这样做的代码,请告诉我,以便我发布.但它确实是常规的
fetch_assoc方法.
没有进一步的讨论让我们跳进代码

JS:

<script type="text/javascript">
$(function(){
    $(".DraggedItem").draggable({
            helper:'clone', 
            cursor:'move',
            revert: true
    });

    $('#rang1').droppable({
      drop: function( event, ui ) {
        //$('#rang1input').val($(ui.draggable).attr('id'));
        var elemid = ui.draggable[0].id;
        $("#rang1input").val(elemid);
        var imgsrc = ui.helper[0].src;
        var $img = $('<img></img>');
        $img.width(90);
        $img.height(90);
        $img.attr('src', imgsrc);

        $('#rang1').append($img);
      }
    });

    $('#rang2').droppable({
      drop: function( event, ui ) {
        //$('#rang2input').val($(ui.draggable).attr('id'));
        var elemid = ui.draggable[0].id;
        $("#rang2input").val(elemid);
        var imgsrc = ui.helper[0].src;
        var $img = $('<img></img>');
        $img.width(90);
        $img.height(90);
        $img.attr('src', imgsrc);

        $('#rang2').append($img);
      }
    });

    $('#rang3').droppable({
      drop: function( event, ui ) {
        //$('#rang3input').val($(ui.draggable).attr('id')); …

如何创建可以像 Facebook 通知一样在整个屏幕上移动的浮动内容？

我正在研究拖放机制.这是一个很棒的博客,帮助我实现

https://blahti.wordpress.com/2011/10/03/drag-drop-for-android-gridview

所以我有dragview,但我想在imageview中间触摸位置,使它看起来不错.如何找到视图中间的坐标,以便我可以将这些坐标作为起始位置传递？

有关如何实现这一点的线索？