javascript - 删除所有玩家后如何保存拖放元素的值(足球经理)

Question

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

看看我的 fiddle :https://jsfiddle.net/ahsce0oj/2/

这是我的 js 代码和我的 fiddle :

$(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'>");
        }
    });
});

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

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

有身份证吗？或者每次在他丢弃一个元素之后？

感谢您的任何提示

编辑:如果有任何其他提示，我会非常高兴如何删除掉落的球员(--> 操纵 DOM，例如删除他的衬衫并将“GOALKEPPER”写入 DIV 或 <p> 元素)

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 以更通用的方式设置样式。我还添加了更多位置来刷新示例，说明这在初始化可拖动和可放置部分时如何提供帮助。

其次，您可能会注意到我向拖动项添加了一个data-type 属性。这可以是数据库中的 SKU 或 ID、产品名称等。我们还可以更改属性以更好地适应数据。但这将是我们识别用户选择了什么以及稍后将其放置在什么上的方式。

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

最后，还有很多 jQuery 代码。我们的可拖动项没有太多大的变化。现在考虑一下，如果您有更多项目，这将根据其类选择器应用于每个项目。当我们制作助手时，我们附加数据属性，以便我们可以将其触摸到放置位置。

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

1. 仅接受拖动项目
2. 附加到img
3. 更新产品/ID 数据
4. 创建一种让用户删除选择的方法
5. 如果项目被删除，则存储原始文本

尚不清楚它是否不再可放置，但您可以轻松添加它，这样您就无法将新项目放置在其上。但随后在删除按钮中再次初始下降。

这一切都发生在下降中。为了避免混淆(围绕 $(this))，我在 drop 之外设置了删除按钮单击功能。

这应该足以让你相处得很好。我怀疑你会按下“保存”或“完成”按钮。在此，我建议迭代每个 .drop 并在每个 data-type 属性中查找信息以及来自父级div。然后，您可以构建一个对象或数组来发送要处理的数据。