查看項目獲取QML

下降禁區外下降我實現一個格和它在他們，我需要將項目拖出網格視圖，並將其放置在一個DropArea不同的圖像。我跟着How to drag an item outside a ListView in QML但現在我的網格項目可以拖動到整個頁面任何地方。我需要限制這個DropArea。 它也有網格項目中的分層問題。我試圖把拖動平鋪到最上面的觀點 我完全新鮮的Qt查看項目獲取QML

這裏是我的代碼

import QtQuick 2.0 

Item { 

    id: media_item 
    anchors.fill: parent 



    Rectangle 
    { 
     y: 100 
     id: holder_box 
     width: 450 
     height: 150 
     color: "#99000000" 
     radius: 5 

     GridView { 
      id: grid 
      anchors.fill: parent 
      model: mediaModel 
      delegate: Item { 
       id: main_item 
       width: grid.cellWidth; 
       height: grid.cellHeight 


       Rectangle { 
        id: item; parent: grid 
        color: mediagraphic 
        x: main_item.x; y: main_item.y 
        width: 100; height: 100; 

        Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } } 
        Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } } 
       } 
       Drag.active: mouseArea.drag.active 
       Drag.hotSpot.x: main_item.width/2 
       Drag.hotSpot.y: main_item.height/2 


       MouseArea { 
        id: mouseArea 
        anchors.fill: main_item 
        drag.target: main_item 

        drag.onActiveChanged: { 
         if (mouseArea.drag.active) { 
          grid.dragItemIndex = index; 
         } 
         main_item.Drag.drop(); 
        } 
       } 

       states: [ 

        State { 
         name: 'dragged' 
         when: main_item.Drag.active 
         PropertyChanges { 
          target: main_item 
          x: x 
          y: y 
         } 
         ParentChange 
         { 
          target: main_item 
          parent: topDrag 
         } 
        } 
       ] 

       onStateChanged: console.log('State', state) 
      } 
      interactive: false 
      anchors.topMargin: -30 

      property int dragItemIndex: -1 

     } 




     ListModel { 
      id: mediaModel 
      ListElement { mediagraphic: "orchid" 
       songname: "Song 1"} 
      ListElement {mediagraphic: "pink" 
       songname: "Song 2"} 
      ListElement {mediagraphic: "purple" 
       songname: "Song 3"} 
      ListElement {mediagraphic: "lighpink" 
       songname: "Song 4"} 
      ListElement {mediagraphic: "blue" 
       songname: "Song 5"} 
      ListElement {mediagraphic: "grey" 
       songname: "Song 6"} 
     } 


     Component 
     { 
      id: grid_component 

      Item { 
       id: main_item 
       width: grid.cellWidth; 
       height: grid.cellHeight 


       Rectangle { 
        id: item; parent: grid 
        color: mediagraphic 
        x: main_item.x; y: main_item.y 
        width: 100; height: 100; 

        Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } } 
        Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } } 
       } 
       Drag.active: mouseArea.drag.active 
       Drag.hotSpot.x: main_item.width/2 
       Drag.hotSpot.y: main_item.height/2 


       MouseArea { 
        id: mouseArea 
        anchors.fill: main_item 
        drag.target: main_item 

        drag.onActiveChanged: { 
         if (mouseArea.drag.active) { 
          grid.dragItemIndex = index; 
         } 
         main_item.Drag.drop(); 
        } 
       } 

       states: [ 

        State { 
         name: 'dragged' 
         when: main_item.Drag.active 
         PropertyChanges { 
          target: main_item 
          x: x 
          y: y 
         } 
         ParentChange 
         { 
          target: main_item 
          parent: media_item 
         } 
        } 
       ] 

       onStateChanged: console.log('State', state) 
      } 
     } 

    } 

    Rectangle 
    { 
     id: now_playing_rect 
     height: parent.height 
     width: parent.width/2 
     x: 640 
     color: "Transparent" 


     DropArea 
     { 
      id: dropArea 
      width: 200 
      height: 200 
      anchors.centerIn: parent 
      onDropped: 
      { 
       song_details.text = grid.model.get(grid.dragItemIndex).songname 
       selected_song_image.color = grid.model.get(grid.dragItemIndex).mediagraphic 
       mediaModel.remove(grid.dragItemIndex) 
      } 
     } 

     Rectangle { 
      id: selected_song_image 
      width: 200 
      height: 200 
      anchors.centerIn: parent 
     } 

     Rectangle { 
      id: next 
      color: 'green' 
      anchors.verticalCenter: now_playing_rect.verticalCenter 
      anchors.left: dropArea.right 
      width: 50 
      height: 50 
     } 

     Rectangle { 
      id: previous 
      color: 'brown' 
      anchors.verticalCenter: now_playing_rect.verticalCenter 
      anchors.right: dropArea.left 
      width: 50 
      height: 50 
     } 

     Text { 
      id: song_details 
      text: qsTr("Song Title") 
      anchors.top: dropArea.bottom 
      font.pointSize: 30 
      color: "White" 
      anchors.horizontalCenter: parent.horizontalCenter 
     } 
    } 

    Item { 
     id: topDrag 
     anchors.fill: parent 
    } 
}

來源

2016-10-17 George Thomas

我編輯你的榜樣。由於我沒有圖像，我把所有東西都改成帶有顏色的矩形，以使其運行。

對於未來的音符，這將是很好，如果我可以從頭開始運行的例子。

主要的變化，你正在尋找的是在美國。通過爲x和y設置「ChangeProperty」，它們將在狀態改回時重置。

Item { 

    id: media_item 
    anchors.fill: parent 



    Rectangle 
    { 
     y: 100 
     id: holder_box 
     width: 450 
     height: 150 
     color: "#99000000" 
     radius: 5 

     GridView { 
      id: grid 
      anchors.fill: parent 
      model: mediaModel 
      delegate: grid_component 
      interactive: false 
      anchors.topMargin: -30 

      property int dragItemIndex: -1 

     } 




     ListModel { 
      id: mediaModel 
      ListElement { mediagraphic: "orchid" 
       songname: "Song 1"} 
      ListElement {mediagraphic: "pink" 
       songname: "Song 2"} 
      ListElement {mediagraphic: "purple" 
       songname: "Song 3"} 
      ListElement {mediagraphic: "lighpink" 
       songname: "Song 4"} 
      ListElement {mediagraphic: "blue" 
       songname: "Song 5"} 
      ListElement {mediagraphic: "grey" 
       songname: "Song 6"} 
     } 


     Component 
     { 
      id: grid_component 

      Item { 
       id: main_item 
       width: grid.cellWidth; 
       height: grid.cellHeight 


       Rectangle { 
        id: item; parent: grid 
        color: mediagraphic 
        x: main_item.x; y: main_item.y 
        width: 100; height: 100; 

        Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutBack } } 
        Behavior on y { NumberAnimation { duration: 400; easing.type: Easing.OutBack } } 
       } 
       Drag.active: mouseArea.drag.active 
       Drag.hotSpot.x: main_item.width/2 
       Drag.hotSpot.y: main_item.height/2 


       MouseArea { 
        id: mouseArea 
        anchors.fill: main_item 
        drag.target: main_item 

        drag.onActiveChanged: { 
         if (mouseArea.drag.active) { 
          grid.dragItemIndex = index; 
         } 
         main_item.Drag.drop(); 
        } 
       } 

       states: [ 

        State { 
         name: 'dragged' 
         when: main_item.Drag.active 
         PropertyChanges { 
          target: main_item 
          x: x 
          y: y 
         } 
        } 
       ] 

       onStateChanged: console.log('State', state) 
      } 
     } 

    } 

    Rectangle 
    { 
     id: now_playing_rect 
     height: parent.height 
     width: parent.width/2 
     x: 640 
     color: "Transparent" 


     DropArea 
     { 
      id: dropArea 
      width: 200 
      height: 200 
      anchors.centerIn: parent 
      onDropped: 
      { 
       song_details.text = grid.model.get(grid.dragItemIndex).songname 
       selected_song_image.color = grid.model.get(grid.dragItemIndex).mediagraphic 
       mediaModel.remove(grid.dragItemIndex) 
      } 
     } 

     Rectangle { 
      id: selected_song_image 
      width: 200 
      height: 200 
      anchors.centerIn: parent 
     } 

     Rectangle { 
      id: next 
      color: 'green' 
      anchors.verticalCenter: now_playing_rect.verticalCenter 
      anchors.left: dropArea.right 
      width: 50 
      height: 50 
     } 

     Rectangle { 
      id: previous 
      color: 'brown' 
      anchors.verticalCenter: now_playing_rect.verticalCenter 
      anchors.right: dropArea.left 
      width: 50 
      height: 50 
     } 

     Text { 
      id: song_details 
      text: qsTr("Song Title") 
      anchors.top: dropArea.bottom 
      font.pointSize: 30 
      color: "White" 
      anchors.horizontalCenter: parent.horizontalCenter 
     } 
    } 
}

我認爲它應該像預期的那樣行事？

請不要忘記接受我的答案，如果它是你所期待的。

來源

2016-10-17 14:21:04 derM

是否有某種方式，我們可以把矩形在網格中的所有視圖上拖動。（現在如果我們將它拖到移動第二矩形下在網格中的第一項.. –

JA，有你需要暫時將它重新放置到一個放在其他地方的Item上，記住Z-Index是父節點本地的，它是子節點 – derM

在這種情況下，添加一個ParentChange ''在你的'State'中，你可以重新映射到'media_item'。但是如果有'smedia_item'或者任何它的祖先兄弟姐妹* layerd uppon'media_item'，它仍然會被分層到你的'drag' – derM

查看項目獲取QML

回答

相關問題