标签: dragula

我需要通过angular2中的html元素访问模型.在我的例子中,我使用ng2-dragula执行拖放操作,它的服务只能访问被拖动的html元素.我需要更新元素的相应模型.这是github的问题.

我有一个带有背景图片的画布。我想要可以在画布上移动的对象（按钮或 div）。

我找到了interact.js的完美解决方案。页面上的第一个示例（称为拖动）正是我想要实现的。获取画布上的位置，如果对象移到外面，它会自动回到里面。

但是，我已经在使用dragula对项目进行排序，并且只想保留一个用于拖放功能的库。添加另一个库会增加我的 web 应用程序的复杂性。

用 Dragula 实现这一目标“容易”吗？如果是，如何？

需要一个代码示例才能理解如何操作。

编辑：这是我的代码的运行图像：

编辑2：我很好奇是否是弹性框破坏了这段代码？Dragula 是否设计用于与柔性容器一起使用？

我有以下容器：

#myDisplay{
        display: flex;
        justify-content:left;        
        overflow:none;
        flex-wrap: wrap;
        flex-grow: 0;
        position:absolute;
        top: 2.68518519%;
        left:9.96767241%;
        width: 90.03232759%;
        height:97.31481481%;

我使用 React 在该容器中添加 3 行，每行 7 个项目：

#myCard{
        
        color:var(--txtcolor);        
        flex-shrink: 0;
        width:12.44763614549592%;
        height: 31.29381571%;
        background: var(--contentbg);
        border: 3px solid var(--drkblue);
        box-sizing: border-box;
        border-radius: 53px;
        margin-right: 1.7658573%;
        padding-left: 1%;
        padding-right:1%;
        font-size: 0.875rem;

我正在使用以下拖拉古拉代码：

  const dragulaDecorator = (componentBackingInstance) => {
    if (componentBackingInstance) {
      let options = { };
      Dragula([componentBackingInstance], options);
    }
  };

并像这样声明我的显示框：

  <div id="myDisplay" ref={dragulaDecorator}>
  {renderCard(1)}
  {renderCard(2)}
  {renderCard(3)}
  {renderCard(4)}
  {renderCard(5)}
  {renderCard(6)} …

我正在尝试使用Dragula拖放库将元素克隆到目标容器中,并允许用户通过将克隆元素拖放到目标容器之外(溢出)来从目标容器中删除克隆元素.

使用提供的示例我有这个:

dragula([$('left-copy-1tomany'), $('right-copy-1tomany')], {
   copy: function (el, source) {
      return source === $('left-copy-1tomany');
   },
   accepts: function (el, target) {
      return target !== $('left-copy-1tomany');
   } 
});
dragula([$('right-copy-1tomany')], { removeOnSpill: true });

哪个不起作用 - 如果容器接受副本,似乎'removeOnSpill'根本不起作用.

有人知道我没做什么,做错了还是有解决办法？

TIA!

我有一个基本的Vue.js对象:

var playlist = new Vue({
    el : '#playlist',
    data : {
        entries : [
            { title : 'Oh No' },
            { title : 'Let it Out' },
            { title : 'That\'s Right' },
            { title : 'Jump on Stage' },
            { title : 'This is the Remix' }
        ]
    }
});

HTML:

<div id="playlist">
    <div v-for="entry in entries">
        {{ entry.title }}
    </div>
</div>

我也使用拖放库(dragula)来允许用户重新排列#playlist div.

但是,在用户使用dragula重新排列播放列表后,此更改不会反映在Vue中playlist.entries,只会在DOM中反映出来.

我已经连接到dragula事件来确定移动元素的起始索引和结束索引.更新Vue对象以反映新订单的正确方法是什么？

小提琴:https://jsfiddle.net/cxx77kco/5/

我通过ng2-dragula使用拖放操作。拖放功能通过以下方式应用：

<div class='container' [dragula]='"first-bag"'>
    <div>item 1</div>
    <div>item 2</div>
</div>

如果我正确理解了angular 2，则如何[dragula]='"first-bag"'将其附加到div的方法称为Angular 2中的“ 属性指令”。

现在，我的组件中有一个名为的变量enableDragNDrop:boolean。[dragula]='"first-bag"'仅在何时才能使用此变量将其附加到div enableDragNDrop == true？

如果enableDragNDrop == false，我想要这样：

<div class='container'><!-- no dragula attribute directive, no dragndrop -->
    <div>item 1</div>
    <div>item 2</div>
</div>

我正在尝试使用 Dragula（实际上是 angular-dragula）将一行从一个表拖到另一个表。如果两个表都有行，则没有问题，但有时目标表将为空。如何让空桌子允许掉落？

我有一个angular2应用程序typescript.我正在使用ng2-dragula来制作拖放应用程序.

我向需要选用,检验一个条件,如果条件为假恢复的阻力,我知道从这里,这revertOnSpill是revertOnSpill:true可以把元素回到其第一的位置.

但是,我不知道怎么可能 ng2-dragula.我赞成它onDrop.这是代码

 constructor() {

              dragulaService.drop.subscribe((value) => {
                  this.onDrop(value.slice(1));
              });

                dragulaService.setOptions('second-bag', {
                  removeOnSpill: true
              });
 }

private onDrop(args) {
   bla
   bla
   bla
   if(err.status=="404")                                                               
          this.dragulaService.removeModel;
         // this.dragulaService.cancel; also tried but did not work   
}

这是html代码:

<div   id="toPlay" class="playBox roundedBox" [dragula]="'second-bag'">
    <img class="w3-animate-top" [src]="sax_path" alt="sax" id="saxsophone"/>
    <img class="w3-animate-top" [src]="drum_path" alt="drum" id="drum"/> 
</div>
<div   id="scene"  [dragula]="'second-bag'">

</div> 

Package.json是:

 "dependencies": {
    "dragula": "^3.7.2"
  },
  "peerDependencies": …

我正在使用 Dragula js 在移动设备中使用拖放功能，突然遇到一个问题，出现以下错误。

[干预] 由于目标被视为被动，因此无法防止被动事件侦听器内的默认情况。看

并且错误发生在以下函数中

function drag (e) {
    if (!_mirror) {
      return;
    }
    e.preventDefault();
    //other code
  }

这里可能有什么问题？

我使用Dragula在我的应用程序上实现了拖放,但是我需要设置它以便我可以将我的元素放到多个div中.

我尝试使用一个类来实现它,但它只是激活我的第一个div.

HTML:

    <div role="presentation" class="table table-striped">
        <div class="files"  id="upload-file"></div>
    </div>
    <div class="col-md-4">
        <div class="drag-container">Test 1</div>
        <div class="drag-container">Test 2</div>
        <div class="drag-container">Test 3</div>
    </div>

JS调用Dragula:

dragula([document.querySelector('#upload-file'), document.querySelector('.drag-container')]);

如何将te项目丢弃到多个div？