перетащить изображение из одной панели в другую в asp.net + JQuery

Рассмотрим сценарий, где у меня есть две панелиперетащить изображение из одной панели в другую в asp.net + JQuery

-> Div-1 у меня есть отдельные образы, которые загружаются из файловой системы

-> Div-2 У меня есть несколько панелей asp.net, таких как 6-8.

Мне нужно перетащить изображения из Div-1 и поместить их в Div-2 с приведенными ниже функциями.

Мне нужно перетащить отдельные изображения из Div-1 в панели, присутствующие в Div-2. После удаления изображений в панели пользователь должен иметь возможность перемещать изображения на любую другую панель, если это необходимо, и если он думает, что он перетащил и сбросил неправильное изображение, он должен иметь возможность удалять изображения, чтобы их можно было поместить назад на левую боковую панель.

источник

2014-09-22 user1234

http://jsfiddle.net/1xnmtyqs/13/ Проверьте – Sam1604

Попробуйте это:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Droppable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
    </style> 
    <script> 
    $(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
     $(this) 
      .addClass("ui-state-highlight") 
      .find("p") 
      .html("Dropped!"); 
     } 
    }); 
    }); 
    </script> 
</head> 
<body> 

<div id="draggable" class="ui-widget-content"> 
    <p>Drag me to my target</p> 
</div> 

<div id="droppable" class="ui-widget-header"> 
    <p>Drop here</p> 
</div> 


</body> 
</html>

Источник: Проверьте этот http://jqueryui.com/droppable/

источник

2014-09-22 08:50:39 coder

Вы можете реализовать требуемое с помощью ** Jquery UI Draggable ** апи для решения. Он поддерживает события, которые вы можете check here

, используя следующий код,

$(document).ready(function(){ 
     $("#draggable").draggable(); 
    });

событий, предусмотренных Draggable

 $("#draggable").draggable({ 
     start: function() { 
      // your logic 
     }, 
     drag: function() { 
       // your logic 
     }, 
     stop: function() { 
      // your logic 
     } 
     });

Надеюсь, это поможет

источник

2014-09-22 08:51:37 Mayank

Проверьте этот пример: -

<style type="text/css"> 
     body 
     { 
      font-family: Arial; 
      font-size: 10pt; 
     } 
     img 
     { 
      height: 100px; 
      width: 100px; 
     } 
     #dvDest 
     { 
      border: 5px solid #ccc; 
      padding:5px; 
      height: 100px; 
      width: 200px; 
     } 
    </style> 

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script> 
    <link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> 
    <script type="text/javascript"> 
     $(function() { 
      $("#dvSource img").draggable({ 
       drag: function (event, ui) { 
        ui.helper.css("opacity", "0.7"); 
       } 
      }); 
      $("#dvDest").droppable({ 
       drop: function (event, ui) { 
        if ($("#dvDest img").length == 0) { 
         $("#dvDest").html(""); 
        } 
        ui.draggable.css("position", "static"); 
        ui.draggable.css("opacity", "1"); 
        $("#dvDest").append(ui.draggable); 
       } 
      }); 
     }); 
    </script> 
    <div id="dvSource"> 
     <img alt="" src="Your Images path" /> 
     <img alt="" src="Your Images path" /> 
    </div> 
    <hr /> 
    <div id="dvDest"> 
     Drop here 
    </div>

Example

источник

2014-09-22 09:54:25

Как я могу сделать то же самое, если позволяет сказать, что для каждого изображения в dvSource у меня есть соответствующий DIV в dvDest то есть несколько DIV в моем назначения – user1234

перетащить изображение из одной панели в другую в asp.net + JQuery

ответ

Смежные вопросы