Question

我一直在努力扩展点击并拖动示例以获得多个正方形，而不只是一个http://elm-lang.org/examples/drag

相关部分是更新：

type alias Model =
    { position : Position
    , drag : Maybe Drag
    }


type alias Drag =
    { start : Position
    , current : Position
    }

我更改了视图，因此它是Svg而不是Div。模型是相同的（这是榆树建筑的卖点）。

困境在于如何更改模型并拖动架构以传达有关正在点击和移动哪个方块的信息

Tile

相反，我改变了这个模型，以包含一个名为type alias Model = { a: Tile, b: Tile, c: Tile } type alias Tile = { position : Position , drag : Maybe Drag } type alias Drag = { start : Position , current : Position }的抽象，它无处可去：

let bikesResponse = try drop.client.get("http://www.c-bike.com.tw/xml/stationlistopendata.aspx")

if let bodyBytes = bikesResponse.body.bytes {

    let string = String(bytes: bodyBytes, encoding: String.Encoding.utf8) {

}

我认为合并所有更新事件以记住点击了哪个方块会很简单。但我今天完全迷失了。

Answer 1

Elm不允许您迭代记录。如此好的开始是将瓷砖放在Dict中，这样可以更轻松地访问和更新单个瓷砖您还需要跟踪拖动哪些瓷砖。而且在任何时候，只能拖动一个瓷砖。因此，Drag类型内部似乎是一个不错的地方。

type alias Model = 
  { tiles : Dict Int Tile
  , draggedTile : Maybe Drag
  }

type alias Tile = Position

type alias Drag =
  { draggedTileId : Int
  , start   : Position
  , current : Position
  }

您的DragStart消息还需要包含被拖动的图块的ID：

type Msg
    = DragStart Int Position
    | DragAt Position
    | DragEnd Position

然后在update中，每当收到DragStart消息时，都会设置draggedTile，并存储您获得的磁贴的ID。
当DragAt或DragEnd消息进入时，您只会读取位置，并更新拖动（并在拖动结束时平铺）。

在view功能中，请加上
List.map viewTile (Dict.toList model.tiles)

添加一个帮助器来渲染每个图块：

viewTile : (Int, Tile) -> Html Msg
viewTile (id, tile) = 
  ...

希望这会让你朝着正确的方向前进..

如何扩展Elm鼠标拖动示例以包含多个方块？

1 个答案: