`

JQuery 实现拖拽功能

 
阅读更多 

<!DOCTYPE html>

<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PF</title>
</head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.3.custom.min.js"></script>
<style type="text/css">
.component{
	border:1px solid red;
	width:800px;
	height:100px;
	margin:10px;
}
.edit {
	width:800px;
	height:300px;
	border:1px solid red;
	margin:10px;
}
.ui-state-hover{
	border:1px solid blue;
}
.ui-state-highlight{
	border:1px solid black;
}
</style>
<script type="text/javascript">
	$(function() {
		$( ".component" ).children().draggable({helper:'clone'});
		$(".edit").droppable({

			drop: function(event,ui){
				$( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
				$(this).append($(ui.draggable).clone());
			}
        });

	});
</script>

<body>
<div class="component">
<img src="1.jpg"></img>
</div>

<div class="edit">
<p></p>
</div>

</body>

</html>
 
0
顶
5
踩
分享到：
| Python 2.7 实践（一）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery简单实现拖拽效果

    在JavaScript的世界里，jQuery库以其简洁的API和强大的功能，深受开发者喜爱。本文将深入探讨如何使用jQuery实现简单的拖拽效果，让你的网页...通过学习和实践这些代码，你可以更好地掌握jQuery实现拖拽功能的技巧。

    jquery实现拖拽

    本文将深入探讨如何使用jQuery实现拖拽功能，适用于表格和控件，以提供良好的用户体验。 首先，我们需要了解jQuery的核心概念。jQuery通过链式调用、选择器、事件处理和高效的操作DOM元素等特性，使JavaScript编程...

    jQuery实现拖拽

    本文将深入探讨如何使用jQuery实现拖拽功能，这是一个在网页交互设计中常见的需求，例如用于制作可拖动的元素或组件。 首先，让我们了解jQuery拖拽功能的基本原理。拖拽功能主要涉及两个核心部分：鼠标按下...

    jquery实现拖拽并储存值到数据库

    本教程将深入讲解如何使用jQuery实现拖拽功能，并将拖动元素的位置信息存储到数据库中。这个解决方案覆盖了从用户交互到数据持久化的整个流程，是网上最全面且完整的教程之一。 首先，我们需要理解拖放（Drag and ...

    Javascript jquery 实现 拖拽， 和吸附功能

    首先，jQuery库为我们提供了一个方便的`draggable()`插件，用于实现元素的拖拽功能。这个插件允许用户通过鼠标操作，将指定的DOM元素在页面上移动。要使用`draggable()`，你需要确保已经引入了jQuery库和jQuery UI库...

    jquery实现table拖拽列效果

    用jquery实现table拖拽列功能，可动态改变表格列宽度，并且实现table表格100%的问题，如果列缩小，则自动拉伸最后一列以实现table100%的效果，如果拉伸长度比原长度大，则显示x滚动条。

    jquery 拖拽动态添加div 保存拖拽后的效果

    本篇文章将聚焦于一个特定的应用场景：使用jQuery实现拖拽功能来动态添加div，并保存拖拽后的位置效果。这个功能在网页布局、可配置界面或者拖放式应用设计中非常常见。 首先，我们需要理解jQuery UI中的Draggable...

    jQuery实现拖拽可编辑模块功能代码

    jQuery 实现拖拽可编辑模块功能是Web开发中常见的需求，尤其在构建可自定义布局的网站或应用时。这个功能允许用户通过简单的鼠标操作来调整页面元素的位置，甚至编辑内容，增强了用户体验和互动性。 在提供的代码...

    jquery拖拽树形菜单

    本文将详细讲解如何利用jQuery实现拖拽功能，并将其应用于树形菜单，帮助你创建交互性强、用户体验良好的Web应用。 一、jQuery基础 jQuery的核心理念是“Write Less, Do More”，通过封装JavaScript的常用功能，使...

    jquery各种拖拽方式原码

    总的来说，jQuery实现拖拽功能涉及到事件监听、DOM操作和浏览器兼容性处理等多个方面，理解并掌握这些知识点对于提升前端开发技能大有裨益。在实践中不断探索和学习，你将能够构建出更高效、更友好的拖拽交互体验。

    jquery拖拽功能

    本篇文章将深入探讨jQuery实现拖拽功能的核心原理与实践方法。 首先，jQuery UI库提供了一个完善的拖拽插件，但在这里我们将主要讨论基于原生jQuery实现的简单拖拽功能。基本思路是监听鼠标事件，包括`mousedown`...

    jquery图片拖拽实例(支持鼠标双击事件拖拽图片)效果代码

    5. **拖拽逻辑**：实现拖拽功能的关键在于捕获鼠标移动（mousemove）事件，并根据鼠标相对于初始位置的偏移更新元素的位置。我们需要记录鼠标按下时的初始位置和元素的初始位置，然后在mousemove事件中计算差值并...

    Jquery实现拖拽插件

    在页面加载完成后，选择要实现拖拽功能的元素，并调用自定义的拖拽插件函数。例如： ```javascript $(document).ready(function() { $('.draggable').draggable(); }); ``` 其中，`.draggable`是CSS选择器，...

    jquery 拖拽

    拖拽.html`很可能是包含上述示例代码的HTML文件，它演示了如何使用jQuery实现拖拽功能。而`jquery-1.8.2.min.js`是jQuery库的压缩版本，它是实现拖拽功能所必需的，因为`draggable()`方法是jQuery的一部分。 总的来...

    jquery实现拖拽排序插件.zip

    本资源"jquery实现拖拽排序插件.zip"提供了一个使用jQuery实现的拖拽排序功能，这在开发交互式网页时非常有用，尤其是需要用户自定义顺序的列表或网格布局。 拖拽排序是一种常见的用户界面特性，允许用户通过鼠标...

    JQueryUI拖拽效果

    1. **拖拽功能的实现** jQueryUI的`draggable()`方法用于将任何HTML元素变为可拖动的对象。只需在目标元素上应用这个方法，并设置一些配置选项，如限制拖动范围、设置拖动时的透明度等。基本用法如下： ```...

    jQuery可拖拽的弹性分享按钮菜单

    首先，jQuery的拖拽功能通常通过插件实现，例如"jQuery UI"库就提供了强大的拖放（drag-and-drop）功能。"jQuery可拖拽的弹性分享按钮菜单"意味着我们可以创建一个菜单，用户可以通过鼠标操作将按钮元素拖动到任意...

    jQuery鼠标拖拽拼图游戏在线游戏代码下载

    三、jQuery实现拖拽功能 1. 添加事件监听器：使用`mousedown`事件开始拖动，`mousemove`事件处理拖动过程，`mouseup`事件结束拖动。 ```javascript $(".piece").mousedown(function() { // 开始拖动逻辑 }); $...

    jquery图片拖拽实例.zip

    【jQuery图片拖拽实例】是一个基于JavaScript库jQuery实现的交互式功能，允许用户通过鼠标拖动操作来移动页面上的图片。这个实例展示了如何利用jQuery的事件处理和DOM操作能力，为用户提供直观且易于使用的界面体验...

Magicbox
Global site tag (gtag.js) - Google Analytics