Question

我用Snap创建了一个对象（音乐人员），现在我想让这个对象的一些元素可以放置（例如第1行）。

我没有在Snap中找到将元素转换为可放置目标的特定函数。我认为jQuery UI功能（拖放）可能有助于解决这个难题。

到目前为止，这就是我所拥有的：

http://jsfiddle.net/LearnForever/L5tgokfj/1/

有错误

“未捕获的ReferenceError：$未定义（匿名函数）@ main_jquery_snap.js：1"

如果从jQuery命令$(document).ready(function() {}运行，则svg对象不会显示。如果我在Snap window.onload = function(){}下运行它，svg对象会正确显示。

请看一下JS代码的结尾，用于拖放＆amp;放下细节。

CODE：

 // Manipulate Snap-object and its elements by jQuery 

$("document").ready(function() {
 	
// initialise Snap, pointing to the svg just created and assign it to a variable. In our case the variable is called "s"

// svg_1 re: 1.a task
  
var s_1 = Snap("#svg_1");

// Visible horizontal lines (starting from above the page)

var line1_tact1_vis_s1 = s_1.rect(20, 40, 180, 1);

var line2_tact1_vis_s1 = s_1.rect(20, 60, 180, 1);

var line3_tact1_vis_s1 = s_1.rect(20, 80, 180, 1);

var line4_tact1_vis_s1 = s_1.rect(20, 100, 180, 1);

var line5_tact1_vis_s1 = s_1.rect(20, 120, 180, 1);
  

var line1_tact2_vis_s1 = s_1.rect(200, 40, 140, 1);

var line2_tact2_vis_s1 = s_1.rect(200, 60, 140, 1);

var line3_tact2_vis_s1 = s_1.rect(200, 80, 140, 1);

var line4_tact2_vis_s1 = s_1.rect(200, 100, 140, 1);

var line5_tact2_vis_s1 = s_1.rect(200, 120, 140, 1);

var line1_tact3_vis_s1 = s_1.rect(340, 40, 140, 1);

var line2_tact3_vis_s1 = s_1.rect(340, 60, 140, 1);

var line3_tact3_vis_s1 = s_1.rect(340, 80, 140, 1);

var line4_tact3_vis_s1 = s_1.rect(340, 100, 140, 1);

var line5_tact3_vis_s1 = s_1.rect(340, 120, 140, 1);

var line1_tact4_vis_s1 = s_1.rect(480, 40, 140, 1);

var line2_tact4_vis_s1 = s_1.rect(480, 60, 140, 1);

var line3_tact4_vis_s1 = s_1.rect(480, 80, 140, 1);

var line4_tact4_vis_s1 = s_1.rect(480, 100, 140, 1);

var line5_tact4_vis_s1 = s_1.rect(480, 120, 140, 1);

var line1_tact5_vis_s1 = s_1.rect(620, 40, 150, 1);

var line2_tact5_vis_s1 = s_1.rect(620, 60, 150, 1);

var line3_tact5_vis_s1 = s_1.rect(620, 80, 150, 1);

var line4_tact5_vis_s1 = s_1.rect(620, 100, 150, 1);

var line5_tact5_vis_s1 = s_1.rect(620, 120, 150, 1);


// Invisible horizontal lines (starting from above the page)

var line0_tact1_invis_s1 = s_1.rect(20, 30, 150, 1).attr('fill', 'none');     //This is the elements area to fill;

var line0_tact2_invis_s1 = s_1.rect(170, 30, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line0_tact3_invis_s1 = s_1.rect(320, 30, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line0_tact4_invis_s1 = s_1.rect(470, 30, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line0_tact5_invis_s1 = s_1.rect(620, 30, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;


var line_1_2_tact1_invis_s1 = s_1.rect(20, 50, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_1_2_tact2_invis_s1 = s_1.rect(170, 50, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_1_2_tact3_invis_s1 = s_1.rect(320, 50, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_1_2_tact4_invis_s1 = s_1.rect(470, 50, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_1_2_tact5_invis_s1 = s_1.rect(620, 50, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;


var line_2_3_tact1_invis_s1 = s_1.rect(20, 70, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_2_3_tact2_invis_s1 = s_1.rect(170, 70, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_2_3_tact3_invis_s1 = s_1.rect(320, 70, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_2_3_tact4_invis_s1 = s_1.rect(470, 70, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_2_3_tact5_invis_s1 = s_1.rect(620, 70, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;


var line_3_4_tact1_invis_s1 = s_1.rect(20, 90, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_3_4_tact2_invis_s1 = s_1.rect(170, 90, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_3_4_tact3_invis_s1 = s_1.rect(320, 90, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_3_4_tact4_invis_s1 = s_1.rect(470, 90, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_3_4_tact5_invis_s1 = s_1.rect(620, 90, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;


var line_4_5_tact1_invis_s1 = s_1.rect(20, 110, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_4_5_tact2_invis_s1 = s_1.rect(170, 110, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_4_5_tact3_invis_s1 = s_1.rect(320, 110, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_4_5_tact4_invis_s1 = s_1.rect(470, 110, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_4_5_tact5_invis_s1 = s_1.rect(620, 110, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;


var line_5_6_tact1_invis_s1 = s_1.rect(20, 130, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_5_6_tact2_invis_s1 = s_1.rect(170, 130, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_5_6_tact3_invis_s1 = s_1.rect(320, 130, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_5_6_tact4_invis_s1 = s_1.rect(470, 130, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;

var line_5_6_tact5_invis_s1 = s_1.rect(620, 130, 150, 1).attr('fill', 'none');     //This is the elements area to fill;;


// Visible vertical lines


var line2_tact1_vert_s1 = s_1.rect(200, 40, 1, 80);

var line3_tact2_vert_s1 = s_1.rect(340, 40, 1, 80);

var line4_tact3_vert_s1 = s_1.rect(480, 40, 1, 80);

var line5_tact4_vert_s1 = s_1.rect(620, 40, 1, 80);

var line6_tact5_vert_s1 = s_1.rect(760, 40, 1, 80);

var line6_tact5_end_vert_s1 = s_1.rect(770, 40, 3, 80);

//Insert svg drawing

var g = s_1.g();

var image = g.image("image_library/treble_clef.svg", -50,-60, 200,290);

  
// create groups of lines to be held in each measure
  
var measure1 = s_1.group (line1_tact1_vis_s1, line2_tact1_vis_s1,
                      line3_tact1_vis_s1, line4_tact1_vis_s1,                             line5_tact1_vis_s1);
measure1.attr ({
//  fill: "#ff0000",  
});  
  
var measure2 = s_1.group (line1_tact2_vis_s1, line2_tact2_vis_s1,
                      line3_tact2_vis_s1, line4_tact2_vis_s1,                             line5_tact2_vis_s1);
measure2.attr ({
//  fill: "#ff0000",
});    
  
var measure3 = s_1.group (line1_tact3_vis_s1, line2_tact3_vis_s1,
                      line3_tact3_vis_s1, line4_tact3_vis_s1,                             line5_tact3_vis_s1);
measure3.attr ({
//  fill: "#ff0000",
});     

var measure4 = s_1.group (line1_tact4_vis_s1, line2_tact4_vis_s1,
                      line3_tact4_vis_s1, line4_tact4_vis_s1,                             line5_tact4_vis_s1);
measure4.attr ({
//  fill: "#ff0000", 
});    
  
var measure5 = s_1.group (line1_tact5_vis_s1, line2_tact5_vis_s1,
                      line3_tact5_vis_s1, line4_tact5_vis_s1,                             line5_tact5_vis_s1);
measure5.attr ({
//  fill: "#ff0000",
});  
  
// jQuery manipulation  
  
var $line1_tact1_vis_s1 = $(line1_tact1_vis_s1);  
  
var measure1 = $(measure1);  
  
  // make li elements draggable
    
    $('.measure_1').draggable({
        containment: measure1,
        cursor: 'move',
        snap: measure1,
      });
    
//   make li elements droppable
  
    $(line1_tact1_vis_s1).droppable({accept: '#m_1_l_1',
       drop: function(event, ui) {
        $( this )
               .addClass( "ui-state-highlight" )
               .html( "Dropped!" );
       }                   
    });
 })

 img {
	max-width: 100%;
}

#svg {
	max-width: 100%;
}

#q_1_a_note_1 {
    text-decoration: none;
    display: inline;
    font-size: 1.5em;
    padding-right: 100px;
    padding-left: 50px;
}

#q_1_a_note_2 {
    text-decoration: none;
    display: inline;
    font-size: 1.5em;
    padding-right: 100px;
}

#q_1_a_note_3 {
    text-decoration: none;
    display: inline;
    font-size: 1.5em;
    padding-right: 110px;
}

#q_1_a_note_4 {
    text-decoration: none;
    display: inline;
    font-size: 1.5em;
    padding-right: 140px;
}

#q_1_a_note_5 {
    text-decoration: none;
    display: inline;
    font-size: 1.5em;
    padding-right: 150px;
}

h2 {
  font-style: italic;
}

#svg_2 

{
  padding-top: 20px;
  margin-top: 20px;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

#choose_note_1_b_measure_1 {
/*
  padding-top: -280px;
  margin-top: -280px;
*/
  padding-bottom: 10px;
  margin-bottom: 10px;
}
 
#note_1 {
  font-size: 1.5em;
  display: inline;
  margin-left: 60px;
}

#note_2 {
  font-size: 1.5em;
  display: inline;
  margin-left: 60px;
}

#note_3 {
  font-size: 1.5em;
  display: inline;
  margin-left: 50px;
}

#note_4 {
  font-size: 1.5em;
  display: inline;
  margin-left: 40px;
}

#note_5 {
  font-size: 1.5em;
  display: inline;
  margin-left: 30px;
}

.additional_instructions {
  color: darkblue;
  font-size: 1.5em;
  font-style: italic;
}

// BUTTONS

#navcontainer_1a ul li {
  float: left;
  padding: 10px;  
} 

.button_small {
  font-size: 1.5em;
  width:20px;
  display: inline;
}

#button_list {
  list-style: none;
}

.measure_1 {
  margin : 5px;
}

#measure_1_note {
  margin-left: 40px;
}

#measure_1_flat {
  margin-right: 30px;
}

.measure_2 {
  margin: 5px;
}

#measure_2_note {
  margin-left: 10px;
}

#measure_2_flat {
  margin-right: 30px;
}


.measure_3 {
  margin: 5px;
}

.measure_4 {
  margin: 5px;
}

#measure_4_flat {
  margin-right: 50px;
}

.measure_5 {
  margin: 5px;
}

/* overlay svg_1
*/

#m_1_l_1 {
  position:absolute;
  margin: 0;
  padding: 0;
  top: 310px;
  left: 150px;
  z-index: 1;
}

#m_1_l_5 {
  position:relative;
  margin: 0;
  padding: 0;
  top: 120px;
  z-index: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../css/main_css.css">
    <script src="js/snap.svg.js"></script>
	  <script src="js/snap.svg-min.js"></script>
    <script src="js/raphael.js"></script>
    <script src="js/vexflow-min.js"></script>   
    <script src="js/main_jquery_snap.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  
</head>

<body>

<div id = "narrative_1">
	
     <h1>Music exam</h1>

    <h2>Exam task # 1.a.</h2>

    <p>Write the following notes in the treble clef.Use whole notes.</p>  
</div>  
  
  <div>
<!--	<div id="canvas_1">-->
    <svg id="svg_1" style="width: 1500px;height: 180px"><svg viewBox="0 0 1000 1000"></svg>
  </svg>
    
  </div>  
    

<!-- create drop target zone  -->
<!--<div id="tDrop_All">  -->
<div id="m_1_l_1" class= "g_sharp measure_1_grand_staff" style="width:10px;height:5px;">
<!-- <p>I'm disabled, you can't drop here!</p> -->
  </div>
<!--
<div id="m_1_l_2" class= "other measure_1_grand_staff" style="width:10px;height:5px;"></div>
<div id="m_1_l_3" class= "other measure_1_grand_staff" style="width:10px;height:5px;"></div>
<div id="m_1_l_4" class= "other measure_1_grand_staff" style="width:10px;height:5px;"></div>
-->
<div id="m_1_l_5" class= "g_sharp measure_1_grand_staff style="width:10px;height:5px;"></div>  
<!--  </div>-->
  
<!--<div id="tDrop_Measure_2">  -->
<!--<div id="m_2_l_1" style="width:140px;height:5px;"></div>-->
<div id="m_2_l_2" class= "E" style="width:140px;height:5px;"></div>
<!--
<div id="m_2_l_3" style="width:140px;height:5px;"></div>
<div id="m_2_l_4" style="width:140px;height:5px;"></div>
-->
<div id="m_2_l_5" class = "E" style="width:140px;height:5px;"></div>  
<!--  </div>-->

<!--<div id="tDrop_Measure_3">  -->
<!--
<div id="m_3_l_1" style="width:140px;height:5px;"></div>
<div id="m_3_l_2" style="width:140px;height:5px;"></div>
<div id="m_3_l_3" style="width:140px;height:5px;"></div>
-->
<div id="m_3_l_4" class = "A flat" style="width:140px;height:5px;"></div>
<!--<div id="m_3_l_5" style="width:140px;height:5px;"></div>  -->
<!--  </div>-->

<!--<div id="tDrop_Measure_4">  -->
<div id="m_4_l_1" class = "F" style="width:140px;height:5px;"></div>
<!--
<div id="m_4_l_2" style="width:140px;height:5px;"></div>
<div id="m_4_l_3" style="width:140px;height:5px;"></div>
<div id="m_4_l_4" style="width:140px;height:5px;"></div>
-->
<div id="m_4_l_5" class = "F" style="width:140px;height:5px;"></div>  
<!--  </div>-->
  
<!--<div id="tDrop_Measure_5">  -->
<!--
<div id="m_5_l_1" style="width:140px;height:5px;"></div>
<div id="m_5_l_2" style="width:140px;height:5px;"></div>
-->
<div id="m_5_l_3" class = "B" style="width:140px;height:5px;"></div>
<!--
<div id="m_5_l_4" style="width:140px;height:5px;"></div>
<div id="m_5_l_5" style="width:140px;height:5px;"></div>  
-->
<!--  </div>-->

<div id = "question_1_a_notes">
  
  <ul class="note_1_a_inline">
    
  <li id = "q_1_a_note_1">G sharp</li>
  <li id = "q_1_a_note_2">E</li>
  <li id = "q_1_a_note_3">A flat</li>
  <li id = "q_1_a_note_4">F</li>
  <li id = "q_1_a_note_5">B</li>
    
    
  </ul>  
</div>  
  
  
<div class = "additional_instructions" id = "task_1_a">Click a note and accidental (if needed) and
  drag-and-drop it to an appropriate place on the staff.
  
  </div>       
    
<div id="navcontainer_1a">    
    <ul id = "button_list">
<!--// buttons for 1st measure    -->
<li class = "measure_1 button_small" id = "measure_1_note">O</li>
<li class = "measure_1 button_small" id = "measure_1_sharp">&#x266F O</li>    
<li class = "measure_1 button_small" id = "measure_1_flat O">&#x266D O</li> 
    
<!--// buttons for 2nd measure-->
<li class = "measure_2 button_small" id = "measure_2_note">O</li>
<li class = "measure_2 button_small" id = "measure_2_sharp">&#x266F O</li>    
<li class = "measure_2 button_small" id = "measure_2_flat">&#x266D O</li> 

<!--// buttons for 3rd measure-->
<li class = "measure_3 button_small" id = "measure_3_note">O</li>
<li class = "measure_3 button_small" id = "measure_3_sharp">&#x266F O</li>    
<li class = "measure_3 button_small" id = "measure_1_flat">&#x266D O</li> 
    
<!--// buttons for 4th measure-->
<li class = "measure_4 button_small" id = "measure_4_note">O</li>
<li class = "measure_4 button_small" id = "measure_4_sharp">&#x266F O</li>    
<li class = "measure_4 button_small" id = "measure_4_flat">&#x266D O</li> 
    
<!--// buttons for 5th measure-->
<li class = "measure_5 button_small" id = "measure_5_note">O</li>
<li class = "measure_5 button_small" id = "measure_5_sharp">&#x266F O</li>    
<li class = "measure_5 button_small" id = "measure_5_flat">&#x266D O</li> 
    
    </ul>
</div>  
 <!-- Task 1_b has been taken out as it as no issues.    -->                                                                
<!--// refer to jQuery UI source files -->
  
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/ui.js"></script>          
                
                      
</body>
</html>

通过jQuery在Snap.svg中拖放

0 个答案: