Question

我创建了两个div，一个包含图片，另一个为空。我想将该图像从一个div拖放到另一个。在这里，我使用的是cdk拖放和cdkDragFreeDragPosition属性，但我对此不满意，因为我正在寻找类似effect

的东西

int main(void)
{
    DDRA = 0x00;                                //Setting PORTA as input
    DDRB = 0xFF;                                //Setting PORTB as output
    DDRC = 0xFF;                                //Setting PORTC as output
    DDRD = 0x02;                                //Setting PORTD.2 as output
    PORTB= 0x00;                                //Setting PORTB's output to zero
    PORTC= 0x00;                                //Setting PORTC's output to zero
    PORTD= 0x02;                                //Setting PORTD.2's output to one
    
    unsigned char currentInput=PINA;            
    unsigned char previousInput=PINA;
    unsigned char changedBitsMusk = 0;
    while (1)
    {
        currentInput = PINA; //update current reading
        
        changedBitsMusk = currentInput ^ previousInput; // calculate what is changed from previous reading 
        if (changedBitsMusk)        // if there is change happen
        {
            if (currentInput&changedBitsMusk) // only process the data if change is HIgh (i.e only when button is pressed)
            {
                PORTB^=changedBitsMusk; // toggle the corresponding pins
            }
        }
        previousInput = currentInput; 
    }
}

Answer 1

cdkDrag不是魔术。如果可以在“位置”中拖动“某物”，则需要使用两个cdkDropList。当我们有两个cdkDropList时，您可以将其视为具有两个数组的两个div

<div *ngFor="let item of arrayOne">
  {{item}}
</div>
<div *ngFor="let item of arrayTwo">
  {{item}}
</div>

cdk-drag允许将元素从数组1交换到数组2。是的，改成类似

<button (click)="interchange(index1,index2)">interchange</button>
interchange(index1,index2)
{
   const element=this.arrayOne.splice(index1,1)
   this.arrayTwo.splice(index2,0,element[0])
}

我们拖动

因此，您需要两个cdkDropList，在cdkDropList内可以在div中使用* ngFor，每个div是cdkDrag，或使用唯一元素。再以两个div为例，我们可以得到类似

<div cdkDropList ...>
  <div *ngFor="let item of arrayOne" cdkDrag>
    {{item}}
  </div>
<div>

<div cdkDropList ...>
  <div *ngFor="let item of arrayTwo" cdkDrag>
    {{item}}
  </div>
<div>

但是列表中并不需要cdkDropList。您可以使用带有唯一元素的cdkDropList

<div cdkDropList ...>
  <div cdkDrag>
    {{itemOne}}
  </div>
<div>

<div cdkDropList ...>
  <div cdkDrag>
    {{itemTwo}}
  </div>
<div>

在这种情况下，互换很简单

 itemTwo={...itemOne}
 itemOne=null

cdk将图像从一个div角度拖放到另一个div

1 个答案: