Question

我们正在使用Jquery来拖放事件。场景我将用户放在日历上，以便他们可以在3天内参加。然后我可以将用户拖到第四天，这样就可以了。但是，如果我将用户拖到他们已经存在的地方，那么我可以将它们放在这里，以便看起来它们在那里两次。我需要检查那个人是否已经在目标区域内的丢弃，如果是，那么不要让丢弃发生。在我的Html页面中，我有以下内容，它是我需要检查的 data-id 元素：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>com.hogehoge</groupId>
        <artifactId>some-parent</artifactId>
        <version>1.0-SNAPSHOT</version>
    </parent>

    <artifactId>some-app</artifactId>
    <packaging>war</packaging>

    <!-- Lots of other things -->

    <build>
        <finalName>the-mighty-app</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>

            <!-- Some other plugins -->
        </plugins>
    </build>
</project>

以上内容是在foreach循环中构建的，附带了一个与会者类。然后，与会者课程成为可拖动的。用：

<div class="row" data-bookingid="@attendee.Id">
     <div class="col-md-12 attendee">
          <div class="col-md-8">
                   @attendee.ServiceUser.FullName
          </div>
          @if (Issues.Count > 0)
          {
             <div class="col-md-8">
                 @String.Join(", ", Issues.ToArray())
             </div>
          }
          <div class="col-md-2" style="text-align: right">
             <button class="btn btn-default icon text-file" style="background-color: transparent; border: none; padding:0;" type="button" data-id="@attendee.ServiceUser.Id"></button>
          </div>
          <div class="col-md-2" style="text-align: right">
             <button class="btn btn-default icon delete" style="background-color: transparent; border: none; padding: 0;" type="button" data-bookingid="@attendee.Id"></button>
          </div>
   </div>

然后droppable函数具有accept和drop函数。所以我需要知道如何获取被拖动元素的data-id，然后如何根据dropzone中的项检查此值。任何指针都会很棒。

Answer 1

应该是这样的：LIsten for drop事件，使用ui参数获取对元素的引用，并检查数据属性。

yourElem.droppable({
    revert: true,
    drop: function (event, ui) {
        var elem = ui.draggable;
        if (elem.data("id")==="xyz") {  //your logic here
            elem.remove();
        }
    }
});

你的检查应该是这样的

if($(this).children('[data-id="' + elem.data("id")  + '"]').length)

Jquery停止发生丢弃事件

1 个答案: