Question

我有一个球员足球场，我希望用户通过拖放创建自己的LineUp ......

看看我的小提琴：https://jsfiddle.net/ahsce0oj/2/

这是我的js代码和我的小提琴：

$(function() {
    $("#draggable2").draggable({            
        appendTo: "body",
        cursorAt: {
            cursor: "move",
            top: 5,
            left: 0
        },
        helper: function(event) {
            return $("<img width='5%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'>");
        }
    });

    $("#droppable2").droppable({
        accept: "#draggable2",
        classes: {
            "ui-droppable-active": "ui-state-default"
        },
        drop: function(event, ui) {
            $(this).find("p").html("<img width='100%' src='https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'>");
        }
    });
});

（目前只有一个位置，只是一个测试） ----＆GT;你必须将文本（右侧）移动到矩形（我的守门员的平均位置）

但是当我有11个位置并且“用户”完成他的阵容草稿时，我该如何保存他的选择？

有ID吗？还是每次他放弃一个元素后直接？

感谢任何提示

编辑：我会非常高兴任何其他提示如何删除已删除的播放器（ - ＆gt;操纵DOM - 例如删除他的衬衫并将“GOALKEPPER”写入DIV或{{1}元素）

Answer 1

这里有很多方法可以实现你的目标（双关语，哈哈！）。我会做我想做的事：

工作示例：https://jsfiddle.net/Twisty/54vgb8bx/4/

HTML代码段

  <section id="content">
    <div id="field">
      <div id="goalie" class="drop center rear">
        <p>Goal Keep</p>
      </div>
      <div id="rightback" class="drop right mid">
        <p>R. Back</p>
      </div>
      <div id="leftback" class="drop center mid">
        <p>C. Back</p>
      </div>
      <div id="leftback" class="drop left mid">
        <p>L. Back</p>
      </div>
      <div id="rightforward" class="drop right for">
        <p>R. Forward</p>
      </div>
      <div id="leftforward" class="drop left for">
        <p>L. Forward</p>
      </div>
    </div>
  </section>

  <!-- SIDBAR RIGHT -->
  <aside>
    <div id="item-1" data-type="shirt" class="drag">
      <p>Move me into the rectangle! ! !</p>
    </div>
  </aside>

CSS代码段

.drag {
  float: left;
  padding: 0% 1% 0%;
  margin-top: 1%;
  margin-right: 0%;
  width: 39%;
  color: white;
  background-color: black;
}

.drop {
  border: 2px solid white;
  height: 5vw;
  width: 5vw;
  color: white;
  font-size: 13px;
  text-align: center;
}

.rear {
  position: absolute;
  top: 0;
}

.mid {
  position: absolute;
  top: 150px;
}

.for {
  position: absolute;
  top: 300px;
}

.right {
  left: 135px;
}

.center {
  left: 273px;
}

.left {
  left: 403px;
}

#field span.remove:hover {
  background-color: #000;
  border-radius: 8px;
}

<强>的jQuery

$(function() {

  $(".drag").draggable({
    appendTo: "body",
    cursorAt: {
      cursor: "move",
      top: 5,
      left: 0
    },
    helper: function() {
      var displayImage = $("<img>", {
        width: "5%",
        src: 'https://d34h6ikdffho99.cloudfront.net/uploads/real_team/shirt/1174/shirt-300.svg'
      }).data("type", $(this).data("type"));
      return displayImage;
    }
  });

  $(".drop").droppable({
    accept: ".drag",
    classes: {
      "ui-droppable-active": "ui-state-default"
    },
    drop: function(event, ui) {
      var removeButton = $("<span>", {
        class: "ui-icon  ui-icon-circle-close remove"
      });
      var dropImage = $("<img>", {
        width: "100%",
        src: ui.helper.attr("src")
      });
      $(this)
        .data("type", ui.helper.data("type"))
        .data("title", $(this).text())
        .find("p")
        .html(dropImage);
      removeButton.appendTo($(this).find("p")).position({
        my: "left bottom",
        at: "right top",
        of: $(this).find("img")
      });
    }
  });

  $("#field").on("click", "span.remove", function() {
    var me = $(this).parent(); // p
    var parent = me.parent(); // div
    var title = parent.data("title");
    parent.data("type", "").html("<p>" + title + "</p>");
  });
});

首先，您会看到我调整了id和class属性。这允许拖放元素具有更多特定ID，然后可以通过CSS以更通用的方式设置样式。我还添加了更多的位置来清除初始化Draggable和Droppable部分时如何帮助它的例子。

其次，您可能会注意到我在拖动项中添加了data-type属性。这可以是来自数据库的SKU或ID，产品名称等等。我们还可以更改属性以更好地适应数据。但这将是我们如何识别用户选择的内容以及之后删除的内容。

接下来，我们更新CSS以按照我们可能需要的方式工作。利用position，我可以使#field成为我们的边界，以便将其中的每个absolute元素准确定位在应有的位置。

最后，很多jQuery代码。我们的拖拉机没有太大的变化。现在考虑如果你有更多的项目，这将根据他们的类选择器应用于每个项目。当我们创建帮助器时，我们将对数据属性进行处理，以便我们可以将其设置为放置位置。

对于下降，我们想做更多。

仅接受拖动项
附加在img
更新产品/ ID数据
为用户创建一种删除选择的方式
如果删除项目，请存储原始文本

目前尚不清楚这是否应该不再可以删除，但您可以轻松添加，以便您无法将新项目放入其中。但随后在删除按钮中再次初始下降。

所有这些都发生在掉落中。为避免混淆（$(this)左右），我在drop下设置了删除按钮单击功能。

这应该足以让你顺利。我怀疑你会保存或完成按钮。在此，我建议迭代每个.drop并在每个data-type属性中查找信息以及从父id查找div。然后，您可以构建一个对象或数组来发送数据以进行处理。

如何保存拖动和放大放弃所有玩家后丢弃的元素值（足球经理）

1 个答案: