放下所有球员后，如何保存拖放的元素值（足球经理）

Question

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

看看我的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'>");
        }
    });
});

(暂时只有一个名额，测试而已) ----> 您必须将文本（右侧）移动到矩形（我的守门员的平均位置）

但是当我有我的 11 个位置并且 "user" 完成了他的阵容选秀时，我该如何保存他的选择？

有身份证？还是每次他放下一个元素后？

感谢任何提示

编辑：如果有任何其他提示，我将非常高兴如何删除掉落的玩家（--> 操纵 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 以更通用的方式设置样式。我还添加了更多位置来清除初始化 Draggable 和 Droppable 部分时如何提供帮助的示例。

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

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

最后，大量 jQuery 代码。我们的可拖动对象没有太大变化。现在考虑，如果您有更多项目，这将根据它们的 class 选择器应用于每个项目。当我们制作助手时，我们添加了数据属性，以便我们可以将其定位到放置位置。

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

只接受一个拖动项
追加到 img
更新产品/ID 数据
为用户创建一种删除选择的方法
如果项目被删除，则存储原始文本

不清楚这是否应该不再是可放置的，但你可以很容易地添加它，这样你就不能将新项目放到它上面。但是然后在删除按钮中再次初始下降。

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

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

放下所有球员后，如何保存拖放的元素值（足球经理）

How can I save dragged & dropped elements VALUE after dropped all players (soccer manager)

javascript

jquery-ui

drag