How to integrate Jquery UI's drag and drop function in the Java class library
How to integrate Jquery UI's drag and drop function in the Java class library
Jquery UI is a popular JavaScript library that provides rich user interface components and interactive functions, including Drag and Drop function.Integrating Jquery UI in the Java class library can provide Java applications with a stronger user interactive experience.This article will introduce how to integrate the jQuery UI's drag and drop function in the Java library and provide the corresponding Java code example.
First, we need to introduce jQuery and jquery UI library files.You can download these two library files directly from the official website (https://jquery.com/ and https://jqueryui.com/) and add them to the project of the Java library.Generally speaking, these two files are preserved in the "JS" directory.
Next, we need to create a HTML page containing a drag and drop function in the Java library.You can use the Java HTML template engine (such as Thymeleaf or FreeMarker) to generate this page, or generate HTML string directly in the Java code.The following is a simple HTML page example, which contains a drag that can be dragged and a area where you receive drag:
html
<!DOCTYPE html>
<html>
<head>
<Title> The drag and drop function of integrated jQuery UI in the java class library </Title>
<link rel="stylesheet" href="js/jquery-ui.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p> Drag me! </p>
</div>
<div id="droppable" class="ui-widget-header">
<p> Drag and drop into this area </p>
</div>
<script>
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$ (this) .addclass ("UI-State-Highlight"). Find ("p").
}
});
});
</script>
</body>
</html>
In the above code, we first introduced the library files of jQuery and jquery UI through the labels of `Link>` and `Script>`.Then, a dragged `DIV>` `` `` `DRAGGABLE") and an `DIV>` element (ID is "Dropppable") is defined on the page.By calling the `Draggable () and` Dropppable () `method in JavaScript code, adding the function of drag and drag and drop to these two elements, respectively.When we drag the can be dragged to the receiving area, the `drap` event will be triggered, and the custom logic can be achieved in the event processing function.
Finally, save the above HTML page as an independent file (such as "Dragdrop.html"), and start a embedded web server through the Java code to return the file as a response to the client.Here are a Java code example using the Spring Boot framework to implement this function:
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.web.servlet.error.ErrorMvcAutoConfiguration;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@SpringBootApplication(exclude = ErrorMvcAutoConfiguration.class)
public class DragDropApplication {
public static void main(String[] args) {
SpringApplication.run(DragDropApplication.class, args);
}
@RequestMapping("/")
public String index() {
return "dragdrop.html";
}
}
In the above code, we declare an Java class as a controller through the `@controller` annotation, and use the root path to the` Index () method with the ``@requestMapping `annotation.In the `index ()" method, we return the file name ("Dragdrop.html") of the above HTML page. The framework will automatically find the corresponding file from the class path according to the file name and return to the client as a response.
By running the above Java code, we can start a embedded web server locally, and use HTTP: // localhost: 8080/to use the jQuery UI's drag and drop function integrated in the Java library.
In summary, this article introduces the method of integrated jQuery UI in the Java class library, and provides related Java code examples.Through this method, we can provide a richer and interactive user interface experience for Java applications.
